html - Div 垂直对齐图像

Question

我有一个带有图像“image.jpg”的 div。

通过使用 text-align=center，图像水平居中。

但是它不是垂直对齐的。我将如何实现垂直对齐？

<div style="vertical-align: middle;text-align:center;">
    <img title="Title3" src="image.jpg" style="display: inline;" id="idImage">
</div>

Answer 1

使用 vertical-align this article 中描述的属性.注意为了得到vertical-align工作你需要做display: table-cell

div.centered {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    /* other styling */
}

我给你的 <div> centered 的类名.

另外你不应该使用 text-align用于居中，而是添加 margin: 0 auto;到图像样式。

编辑

HTML:

<div class="centered">
    <img src="..." class="centered-image" />
</div>

CSS:

div.centered {
    display: table-cell;
    vertical-align: middle;
}

img.centered-image {
    margin: 0 auto;
}