中央の3つの画像中央左中央の画像

Question

中央の3つの画像を水平に中央に置き、左側の画像を中央の画像の左側に、右側の画像を中間画像の権利？

https://jsfiddle.net/0wk84qaf/

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<div style="text-align:center;"> 
    <div style="display:inline-block;"> 
     <img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award1-2.jpg" style="vertical-align:middle;" /> 
     <img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award3-2.jpg" style="vertical-align:middle;" /> 
     <img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award2-2.jpg" style="vertical-align:middle;" /> 
    </div> 
</div> 

あなたが見ることができる

は、現在、全体のdivが中心ですが、私はそれが途中で強打になりたいのに対し、中央の画像は、やや中心から外れている ...

Answer 1

絶対配置を使用できます。中間イメージを親の中心に置き、他の要素をその親のどちらかの側に絶対配置します。

.images { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.images img:first-child, 
 
.images img:last-child { 
 
    position: absolute; 
 
    top: 50%; 
 
} 
 

 
.images img:first-child { 
 
    left: 0; 
 
    transform: translate(-100%,-50%); 
 
} 
 

 
.images img:last-child { 
 
    right: 0; 
 
    transform: translate(100%,-50%); 
 
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
<div style="text-align:center;"> 
 
    <div class="images"> 
 
    <img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award1-2.jpg" style="vertical-align:middle;" /> 
 
    <img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award3-2.jpg" style="vertical-align:middle;" /> 
 
    <img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award2-2.jpg" style="vertical-align:middle;" /> 
 
    </div> 
 
</div>

Answer 2

は、Flexを使用することによって、これを達成することができ、それはこのようなもののために本当に良いことです。あなたは自分自身を微調整しなければならないかもしれないが、あなたが要求したものはそこにあります。

このlink to view more on flexをご覧ください。

.img-holder { 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 100%; 
 
} 
 

 
.img-holder .img { 
 
    width: 100%; 
 
    justify-content: space-between; 
 
} 
 

 
.img-holder img { 
 
    width: 90%; 
 
    height: auto; 
 
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
<div class="img-holder"> 
 

 
<div class="img"> 
 
    <img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award1-2.jpg" style="vertical-align:middle;" /> 
 
</div> 
 

 
<div class="img img-smaller"> 
 
    <img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award3-2.jpg" style="vertical-align:middle;" /> 
 
</div> 
 

 
<div class="img"> 
 
    <img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award2-2.jpg" style="vertical-align:middle;" /> 
 
</div> 
 
</div>

Answer 3

ちょうどあなたのimgタグが33.3％

<div style="text-align:center;"><div style="display:inline-block; 
 
%"><img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award1-2.jpg" style="vertical-align:middle;width:33.3%" /><img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award3-2.jpg" style="vertical-align:middle;width:33.3%" /><img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award2-2.jpg" style="vertical-align:middle;width:33.3%" /></div></div>

の幅を持たせます