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

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>