在一個容器中水平對齊圖像

我想要在一個塊中對齊3個圖像。他們必須留在相同大小的容器中並水平放置。在一個容器中水平對齊圖像

下面的代碼：

<div class="container"> 
    <img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" /> 
    <img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" /> 
    <img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/> 
</div> 


.container { 
    width: 300px; 
    height: 200px; 
    position:relative; 
    float: left; 
    text-align: center; 
} 
.container img { 
    width: 100%; 
    height: auto; 
    margin: 5px; 
}

來源

2014-03-12 Betzyc

是[this]（http://jsfiddle.net/Lbmkr/）是什麼意思？ –

看起來像每個圖像的寬度爲100％ - 這看起來不正確...特別是如果容器只有300px寬...（每個圖像將採取容器的全部寬度） – ochi

問題不明確， @ user3412999 - 請你澄清一下嗎？ – Marcello

唔...我不認爲你可以在一個水平線上的所有三幅圖像，如果你給他們全部width:100%。該屬性會使每個圖像佔據容器的全部寬度，這意味着每個圖像將被推送到下一行。

您必須給圖像一個較小的寬度，以便將它們全部放在一行上。 100％/ 3 = 33.3％（四捨五入），所以請使用它。下面是.container img，似乎工作的一些修改CSS：

.container img { 
    width: 33.3%; 
    height: auto; 
    padding:5px; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
}

注意，除了改變圖像的寬度，我也改變了margin到padding，並利用了box-sizing屬性的（閱讀更多關於它here ）。這可以讓您在圖像周圍保持5px的相同間距，而不會將任何圖像撞到第二行。

此外，HTML需要稍微改變。在這種情況下，我們利用<img>元素的默認display:inline-block將它們全部顯示在同一行上。然而，在這樣的元素之間的任何空白將導致圖像之間的空間，使需要消除：

<div class="container"> 
    <img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" /><img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" /><img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/> 
</div>

如果你不明白我的意思是說，嘗試格式化每個<img>元素在HTML中它自己的行，並看看這是如何影響他們的位置。

這是JSFiddle，所以你可以看到這個成就。如果您有任何問題，請告訴我，我很樂意進一步幫助！

編輯：或者，如果您確實想在您的HTML中保留<img>元素之間的空格，則可以補償不需要的額外空間，並使用負邊距。只需將margin-right:-4px;添加到您的款式中即可。.container img。更新JSFiddle顯示這是什麼結果。

來源

2014-03-12 23:38:12 Serlite

謝謝你Serlite！真的有幫助，但現在我的圖像高度不匹配或圖像不成比例。 – Betzyc

太棒了！很高興幫助。不幸的是，這是在靜態寬度的容器內將所有圖像放在水平線上的副作用。除非它們具有相同的寬高比，否則圖像將使用此方法顯示在不同的高度。（在這些參數中我沒有看到一個很好的純CSS方法。） – Serlite

我也試圖讓它在jQuery中懸停時褪色到50％。當它褪色時。繪畫的標題顯示出來。這是我到目前爲止：$（document）.ready（function（）{（'。container'）。hover（function（）{（this）.fadeTo（0.5，'fast'）; }）; }）; – Betzyc

在我的CSS解決方案中，我將「container」類的寬度除以3（300px/3），然後減去10px（我從padding-left和padding-right得到每個圖像）。所以一張圖片的寬度應該是90px。不過，我還想爲瀏覽器間距減去5px，因此每個圖片的總寬度應爲85px。這裏是代碼：

<html> 
<head> 
<style> 
.container { 
    width: 300px; 
    height: 200px; 
    position:relative; 
    float: left; 
    text-align: center; 
} 
.container img { 
    width: 85px; 
    height: auto; 
    margin: 5px; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
    <img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" /> 
    <img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" /> 
    <img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/> 
</div> 
</body> 
</html>

來源

2016-02-24 14:27:42

您可以添加一些文字來解釋您的解決方案的工作原理嗎？ – Kmeixner

我把「容器」類的寬度除以3（300px/3），然後減去 –

，然後減去10px（我從每個圖像的填充左邊和填充右邊得到）。所以單個圖像的寬度應該爲90px。但我也想爲瀏覽器間距減去5px，因此每個圖像的總寬度應爲85px –

在一個容器中水平對齊圖像

回答

相關問題