wef erv wef erv - 3 months ago 6
CSS Question

Can't center some images one next the other with css

I have the following code:



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%">





But I have this problem -

If i do as you see in the code: I am loosing the center effect and the all images are going left.

The only possibility I know - is to do display the images as "block" instead of "inline-block" - but that is make them one above the other and I want them to be close to each one.

Answer

You can center images by wrapping them in another div and giving this wrapper text-align:center (if you want them as inline-block elements):

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>