는 CSS를

Question

와 다른 다음 몇 가지 이미지를 중심으로 수 없습니다 나는 다음과 같은 코드를 가지고 :

img { 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<h2>Center an Image</h2> 
 
<p>To center an image, use margin: auto; and make it into a block element:</p> 
 

 
<img src="paris.jpg" alt="Paris" style="width:40%"> 
 
<img src="paris.jpg" alt="Paris" style="width:40%"> 
 
<img src="paris.jpg" alt="Paris" style="width:40%">

하지만이 문제가 - 당신이 보는대로 내가 할 경우

을 코드에서 : 나는 중앙 효과를 잃어 버리고 모든 이미지가 남아 있습니다.

"인라인 블록"대신 "블록"으로 이미지를 표시하는 것이 유일한 방법입니다. 그러나 그것들을 다른 블록 위에 중첩시키고 각 블록을 서로 가깝게 배치하고 싶습니다.

Answer 1

(당신이 inline-block 요소로 원하는 경우) 다른 사업부에 그들을 배치하고이 래퍼 text-align:center를 제공하여 이미지의 중심을 수 있습니다

img {display:inline-block;} 
 
.wrapper {text-align:center;}

<div class="wrapper"> 
 
    <img src="http://placehold.it/350x150" alt="Paris" style="width:40%"> 
 
    <img src="http://placehold.it/350x150" alt="Paris" style="width:40%"> 
 
    <img src="http://placehold.it/350x150" alt="Paris" style="width:40%"> 
 
</div>

Answer 2

당신은 주위에 DIV 컨테이너를 사용해야합니다 이미지 태그 대신 이미지 대신 width 및 margin:0 auto을 입력하십시오. 그것들을 display: inline-block에 놓으십시오. 이미지가 표시되어야 어떻게 JSFIDDLE

.wrapper { 
 
    border: 1px solid grey; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
img { 
 
    display: inline-block; 
 
}

<div class=wrapper> 
 
    <img src="https://static.pexels.com/photos/3247/nature-forest-industry-rails.jpg" alt="Paris" style="width:20%"> 
 
    <img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="Paris" style="width:20%"> 
 
    <img src="http://1.bp.blogspot.com/-FlpE6jqIzQg/UmAq6fFgejI/AAAAAAAADko/ulj3pT0dIlg/s1600/best-nature-desktop-hd-wallpaper.jpg" alt="Paris" style="width:20%"> 
 
</div>