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

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

---

该中心水平对齐img，但不垂直对齐。我需要两者，以便画廊页面看起来整齐对齐。我需要不惜一切代价避免使用表，尽管这会产生完全符合我需要的结果。我需要一个可移植、无黑客攻击的CSS解决方案。

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

在图像元素上设置“垂直对齐：中间”可以起到一定的作用，但它只会将它们相对于当前所在的位置对齐。要使线框与浮子的高度相同，请在容器上设置“线高度”：

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

div{float:left；宽度：100px；高度：100px；线宽：100px；}
div img{垂直对齐：中间；}

您必须处于该状态才能工作，因为否则浏览器会将图像单独渲染为块，而不是在文本行框中内联替换元素

不幸的是，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>

​；
​
​

很抱歉，这不起作用，尽管firefox报告浏览器处于符合标准模式。如果这个例子在某个地方起作用，你能发布一个url吗。我可能能够比较CSSE之间的差异。完全正确，在图像标记工作后添加一个不间断的空格！不过看起来有点难看。在Firefox（完整）标准模式下，在没有空间的情况下对我有效。但是，是的，IE无论如何都需要一个空间。一个普通的空间在IE中对我有用（但在Firefox的怪癖模式中不行）。我选择零宽度而非非非破坏性，以避免任何不必要的内容大小增加。先生，我喜欢您概述的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>