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

Question

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 1

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>

Answer 2

You should use a DIV container around the image tags and give it a
width and
margin:0 auto instead of the images. put those on
display: inline-block.
From a 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>