如何水平放置圖像並將其與容器底部對齊？

我已經能夠通過其自身水平居中圖像。我也能夠通過自己對準容器的底部。但我無法同時做到這一點。

以下是我有：

.image_block { 
    width: 175px; 
    height: 175px; 
    position: relative; 
    margin: 0 auto; 
} 
.image_block a img { 
position: absolute; 
bottom: 0; 
} 

<div class="image_block"> 
    <a href="..."><img src="..." border="0"></a> 
</div>

該代碼對齊圖像到div的底部。我需要添加/更改哪些內容才能使圖像在div內水平居中？圖像大小在手之前是未知的，但是它將會是175x175或更少。

來源

2008-11-18 Echo

.image_block { 
    width: 175px; 
    height: 175px; 
    position: relative; 
} 

.image_block a { 
    width: 100%; 
    text-align: center; 
    position: absolute; 
    bottom: 0px; 
} 

.image_block img { 
/* nothing specific */ 
}

解釋：絕對定位的元件將是相對於具有非靜態定位最接近的母體。我假設你很滿意你的.image_block顯示，所以我們可以離開那裏的相對定位。

因此，<a>元素將相對於.image_block定位，這將給我們底部對齊。那麼，我們text-align: center<a>元素，並給它一個100％的寬度，所以它的大小爲.image_block。

<img>範圍內的<a>將適當居中。

來源

2008-11-18 19:55:32 Owen

非常感謝。這在FF，IE6，IE7和Chrome中非常完美。 – Echo 2008-11-18 20:03:57

簡單而有效的 – 321zeno 2013-04-24 13:52:48

刪除position: relative;一行。我不確定爲什麼，但是它爲我解決了這個問題。

來源

2008-11-18 19:42:02

位置：相對於所述含元件上需要在其內，以進行絕對定位的元件。 – 2008-11-18 19:57:41

不會

margin-left:auto; 
margin-right:auto;

加入.image_block一個IMG做的伎倆？
需要注意的是，不會在IE6工作（也許7不知道）
那裏，你將不得不在.image_block做div容器

text-align:center;

position:relative;可能是一個問題了。

來源

2008-11-18 19:44:25

你嘗試過：

.image_block{ 
text-align: center; 
vertical-align: bottom; 
}

來源

2008-11-18 19:55:59 workmad3

這是非常複雜的，它失敗的原因是，當絕對定位時，您無法通過邊距或文本對齊進行定位。

如果圖像是獨自在div，那麼我建議是這樣的：

.image_block { 
    width: 175px; 
    height: 175px; 
    line-height: 175px; 
    text-align: center; 
    vertical-align: bottom; 
}

您可能需要堅持的圖像，而不是在vertical-align通話;不確定沒有測試它。然而，使用vertical-align和line-height會比對待絕對定位要好得多。

來源

2008-11-18 19:56:44

這也適用（從這個question截取的提示）

.image_block { 
    height: 175px; 
    width:175px; 
    position:relative; 
} 
.image_block a img{ 
margin:auto; /* Required */ 
position:absolute; /* Required */ 
bottom:0; /* Aligns at the bottom */ 
left:0;right:0; /* Aligns horizontal center */ 
max-height:100%; /* images bigger than 175 px */ 
max-width:100%; /* will be shrinked to size */ 
}

來源

2013-01-04 11:08:09 vdua

#header2 
{ 
    display: table-cell; 
    vertical-align: bottom; 
    background-color:Red; 
} 


<div style="text-align:center; height:300px; width:50%;" id="header2"> 
<div class="right" id="header-content2"> 
    <p>this is a test</p> 
</div> 
</div>

來源

2015-10-07 15:49:30 dfortun

如何水平放置圖像並將其與容器底部對齊？

回答

相關問題