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'并不意味着居中。

在图像元素上设置'vertical-align：middle'有效，但它只相对于它们当前所在的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中添加一些文本 - 即使是普通的空间也会这样做，但你也可以尝试零宽度空间：

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

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

1 个答案: