将CSS中的多个图像并排居中

Question

我是CSS和HTML的初学者，所以我确定这是一团糟。 但是我想做的是将3个图像并排放置在CSS的水平中心。 我尝试过使用不同的解决方案来使它们正确对齐，但是它们仍然停留在页面左侧，或者会堆叠在彼此的顶部（有时会重叠）。

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

而我的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;
}

默认情况下，图像很大。 第二个CSS块调整了它们的大小，但我无法让他们做更多的事情。 有任何想法吗？

Answer 1

您可以使用几乎相同的CSS，但只需进行一次简单的修改即可 ：

vertical-align: middle;

并删除这些：

display: inline-block;
position: relative;

这里没有center 。 它一定是middle 。 请更正。 并从<div>删除display: inline-block 。 您的最终代码应类似于：

 #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> 

单击“ 运行代码片段” ，然后按“整 页”以检查是否符合您的期望。

Answer 2

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

Answer 3

可能是您的问题是容器，因为图像与中心对齐正确，所以我简化了代码并为容器和图像上色：

#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/

更新

阅读其他注释，我想您希望所有注释都对齐，这是生成FLEX BOX代码的好资源： http : //the-echoplex.net/flexyboxes/

这是示例： https : //jsfiddle.net/bcpph0pp/2/

Answer 4

尝试泄漏flexbox，因为它有许多用途，可以很好地对齐项目和内容。 这也使您的CSS非常小。

如果您想让它们始终居中。 您应该使用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> 

对于其他用途，请查看css技巧，它们为如何使用flexbox提供了很好的示例。