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/我创造了一个小提琴

Answer 1

将border: 1px solid black放在img, span标签上，然后检查浏览器开发中的两个元素。安慰。您会注意到范围默认为其父级的100％高度，而图像具有已定义的高度（实际图像的高度）。

所以你并没有真正垂直对齐那些相对于div的元素，你只是将span元素中的文本垂直对齐相对于span：）

如果你真的想使用表格进行垂直居中，这里是正确的代码： http://jsfiddle.net/WXLsY/

（vertical-align和display:table-cell继续父，你需要包装表）

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

Answer 2

以下是解决问题的一种方法：

HTML：

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

将img放在span中，图片是替换元素，它不能包含子内容，因此，vertical-align将不起作用。

CSS：

div {
    width:200px;
    height:200px;
    background-color:red;
    display:table;
    margin:10px;
}
span {
    display:table-cell;
    vertical-align:middle;
}

请参阅演示：http://jsfiddle.net/audetwebdesign/Fz6Nj/

有几种方法可以执行此操作，您也可以将display: table-cell应用于父div元素，但这是一种不同的方法。

Answer 3

为了在表格单元格内垂直对齐图像，您需要为图像显示一个块。

float: right

边距：0自动将图像与中心对齐。如果您希望图像左对齐，则不要包含此图像。如果您希望图像右对齐，可以添加：

{{1}}

谢谢， ģ

Answer 4

您可以尝试添加 - ＆gt; line-height：200px;在span style部分，我认为它可能有用;

垂直对齐中间，显示表格单元格无法处理图像

4 个答案: