css - 显示表格单元格的垂直对齐中间不适用于图像

Question

我正在尝试使用 vertical-align: middle 在布局上垂直居中，有时是文本，有时是图像，但它只适用于文本。谁能告诉我为什么？

HTML:

<div>
    <img src="http://jsfiddle.net/img/logo.png"/>
</div>

<div>
    <span> text </span>
</div>

CSS:

div{
    width:200px;
    height:200px;
    background-color:red;
    display:table;

    margin:10px;
}
img, span{
    display:table-cell;
    vertical-align:middle;
}

http://jsfiddle.net/9uD8M/我也创建了一个 fiddle

Answer 1

将 border: 1px solid black 放在 img, span 标签上，然后在浏览器 dev 中检查这两个元素。安慰。您会注意到跨度默认为其父级的 100% 高度，而图像具有定义的高度(实际图像的高度)。

因此，您并不是真正将这些元素相对于 div 垂直对齐，您只是将 span 元素内的文本相对于 span 垂直对齐:)

如果你真的想使用表格来垂直居中，下面是正确的代码: http://jsfiddle.net/WXLsY/

(vertical-align 和 display:table-cell 在父级上，你需要在它们上面包装表格)

但是还有其他方法可以做到这一点(SO对这个问题有很多答案，只需使用搜索)