Question

我想使用CSS'display：table-cell垂直两个图像，但即使我指定了高度也似乎不起作用

<div style='display: table;height:500px'>
    <div style=' display: table-cell;vertical-align: middle;'>
        <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/200px-Intel-logo.svg.png' />
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/500px-Intel-logo.svg.png" />
    </div>
</div>

http://jsfiddle.net/33KYS/

Answer 1

您还需要将vertical-align属性设为图像！

img{
    vertical-align:middle;
}

Demo

Answer 2

仅处理图片时，您无需在table和table-cell内进行换行。图像本身的垂直对齐也可以。

.img { vertical-align: middle; }

<div>
        <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/200px-Intel-logo.svg.png' />
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/500px-Intel-logo.svg.png" />
</div>

http://jsfiddle.net/33KYS/2/

使用display垂直对齐两个图像：table-cell

2 个答案:

Demo