html - 垂直对齐 block 级元素内的 block 级元素

Question

我需要在固定宽度和高度的 block 级元素内居中对齐图像(可变宽度和高度)。 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 水平而不是垂直居中对齐。我需要两者，以便画廊页面看起来整齐对齐。我需要不惜一切代价避免使用表格，尽管这会产生完全符合我需要的结果。我需要一个可移植的、无需 hack 的 CSS 解决方案。

Answer 1

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

在图像元素上设置“vertical-align: middle”有点管用，但它只会使它们相对于 line box 对齐他们目前正在。要使行框与 float 高度相同，请在容器上设置“line-height”:

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

你必须在Standards Mode为此，否则浏览器会将自己的图像呈现为 block ，而不是文本行框中的内联替换元素。

不幸的是，IE(至少 7 个)即使在尝试标准模式时仍然保持 block 行为。这有一个技术原因，即 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>