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

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对这个问题有很多答案,只需使用搜索)