2

我需要在固定宽度和高度的块级元素内居中对齐图像（可变宽度和高度）。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 解决方案。

4

1 回答 1

14

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

在图像元素上设置 'vertical-align: middle' 有点效果，但它只会将它们相对于它们当前所在的行框对齐。要使线框与浮动高度相同，请在容器上设置 '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>
于 2009-04-06T11:17:22.857 回答