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

Question

我试图在布局上使用垂直对齐：居中来垂直居中，有时是文本，有时是图像，但它只适用于文本。有人能告诉我为什么吗？

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中，图像是一个被替换的元素，它不能包含子内容，因此，垂直对齐将不起作用。

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

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

display: block
margin: 0 auto

margin:0auto用于将图像与中心对齐。如果您希望图像左对齐，则不要包含此项。如果你想让图像正确对齐，你可以添加：

float: right

谢谢，G

Answer 4

您可以尝试添加->行高：200px；在跨度样式部分，我认为它可能会起作用；