將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提供了很好的示例。