在块级元素内垂直对齐块级元素

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

是的，垂直页边距的计算方式与水平页边距的计算方式完全不同；“自动”并不意味着居中。

在图像元素上设置“垂直对齐:居中”是可行的，但它只会将它们与当前所在的line box对齐。要使线框的高度与浮动相同，请在容器上设置‘line - height’：

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

您必须在Standards Mode中才能正常工作，否则浏览器会将自己的图像呈现为块，而不是文本行框中的内联替换元素。

不幸的是，IE (至少最多7个)仍然保持阻塞行为，即使在标准模式下也是如此。这有一个技术原因，即IE是裤子。

为了让IE相信图片是文本行的一部分，你必须在 - 中添加一些文本，即使是普通的空格也可以，但你也可以尝试使用零宽度空格：

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