塊級元素內的垂直對齊塊級元素

Question

我需要在固定寬度和高度的塊級元素內對齊圖像（可變寬度和高度）。 css標記看起來像這樣：

<div style="float: left; width: 100px; height: 100px;"><img src="yada" width="50" height="60"></div>
<div style="float: left; width: 100px; height: 100px;"><img src="yada" width="60" height="50"></div>
<div style="float: left; width: 100px; height: 100px;"><img src="yada" width="75" height="75"></div>

關鍵是，圖像將自己對齊到容器div的右上角。 我希望它們在水平和垂直方向都居中。 我試過設置img標簽樣式如下：

img {
display: block;
margin: auto;
}

這個中心 - 水平對齊img而不是垂直對齊。 我需要兩個，以便畫廊頁面看起來整齊排列。 我需要不惜一切代價避免使用表，盡管這會產生我想要的結果。 我需要一個便攜式，無黑客的CSS解決方案。

Answer 1

是的，垂直邊距的計算方式與水平邊距完全不同; 'auto'並不意味着居中。

設置“垂直對齊：中間”上的圖像元素進行排序的工作，但它只是比對它們相對於線箱 ，他們目前正在對。 要使線框的高度與浮點數相同，請在容器上設置“line-height”：

<style>
    div { float: left; width: 100px; height: 100px; line-height: 100px; }
    div img { vertical-align: middle; }
</style>

您必須處於標准模式才能使其正常工作，因為否則瀏覽器會將這些圖像自身呈現為塊而不是文本行框中的內聯替換元素。

不幸的是，即使在嘗試標准模式時，IE（至少7個）仍然保持阻止行為。 這有一個技術原因，即IE是褲子。

為了說服IE你真正意味着圖像是文本行的一部分，你必須在div中添加一些文本 - 即使是普通的空間也會這樣做，但你也可以嘗試零寬度空間：

<div><img src="http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png" width="50" height="60" />&#8203;</div>
<div><img src="http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png" width="60" height="50" />&#8203;</div>
<div><img src="http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png" width="75" height="75" />&#8203;</div>