Centering multiple images in CSS side by side

Question

I'm a beginner at CSS and HTML so I'm sure this is a mess. But what I'm trying to do is center 3 images side by side in a horizontal center in CSS. I've tried different solutions have gotten them to align properly but they still stay stuck to the left of the page or will stack on top of each other (and sometimes overlap).

<div id="imagesMain">
    <img src="IMG_20140930_140020.jpg">
    <img src="IMG_20140922_164619.jpg">
    <img src="IMG_20140608_181811.jpg">
</div>

And my CSS:

#imagesMain{
    display: inline-block;
    position:relative;
    padding: 0;
    margin-left:auto;
    margin-right:auto;
    margin-top: 20px;
    text-align:center;
}
#imagesMain img{
    height: 400px;
    width: 300px;
    vertical-align: center;
}

The images by default are huge. the 2nd CSS block resizes them but I can't get them to do much else. Any ideas?

Answer 1

You can use the almost same CSS, but with one simple correction, change :

vertical-align: middle;

And remove these:

display: inline-block;
position: relative;

There's no center here. It must be middle . Please correct it. And remove display: inline-block from the <div> . Your final code should be like:

 #imagesMain { padding: 0; margin-left: auto; margin-right: auto; margin-top: 20px; text-align: center; } #imagesMain img { height: 400px; width: 300px; vertical-align: middle; } 

 <div id="imagesMain"> <img src="IMG_20140930_140020.jpg"> <img src="IMG_20140922_164619.jpg"> <img src="IMG_20140608_181811.jpg"> </div> 

Click on Run Code Snippet and press Full Page to check if this is what you are expecting.

Answer 2

尝试将display: inline-block更改为display: block （以及删除margin-left: auto; margin-right: auto; 。如果您#imagesMain占用屏幕宽度的100％，图像居中放置，可以正常工作。

Answer 3

Probably your problem is the container, because the image are correct align to the center, I have simplify your code and colored the container and images:

#imagesMain{

    position:relative;
    display: inline-block;

    width:100%;
    height:250px;
    margin-top:20px;

    background-color:red;

    text-align:center;
}
#imagesMain img{
    background-color:blue;
    height: 200px;
    width: 150px;
    margin-left:-4px; /* trick for remove the space beetwen */
}

https://jsfiddle.net/bcpph0pp/1/

UPDATE

Reading other comments I think you want all aligned in the middle, this is a good resource for generate the code for FLEX BOX: http://the-echoplex.net/flexyboxes/

And this is the example: https://jsfiddle.net/bcpph0pp/2/

Answer 4

try learing flexbox because it has many uses for nicely aligning items and content. it also keeps your css very small.

if you would like to keep them centered al the time. you should use justify-content: center;

 #imagesMain{ display: flex; justify-content: center; } #imagesMain img{ height: 400px; width: 300px; margin: 0 10px; } 

 <div id="imagesMain"> <img src="IMG_20140930_140020.jpg"> <img src="IMG_20140922_164619.jpg"> <img src="IMG_20140608_181811.jpg"> </div> 

for alternative uses look at css tricks they give good examples for how to use flexbox.