Question

我正在试图弄清楚为什么内嵌图像不会卷起容器的垂直中心。

<div class="container">
    <img src="http://dummyimage.com/46x46/000/fff.png" />
</div>

CSS：

.container {
    height: 50px;
    width: 80px;
    line-height: 50px;
    background-color: gray;
    text-align: center;
}

img {
    display: inline;
    vertical-align: middle;
}

非常感谢任何帮助甚至替代解决方案。如果你想让我详细说明一些事情，我会很高兴。

Answer 1

尝试将容器的字体大小设置为例如0。

根据W3：

垂直对齐：中间;将框的垂直中点与父框的基线加上父框的x高度的一半对齐。

因此，这与父级字母“x”的高度有关，如果将字体大小设置为0，则为0：

.container {
    font-size: 0;
    height: 50px;
    width: 80px;
    line-height: 50px;
    background-color: gray;
    text-align: center;
}

img {
    display: inline;
    vertical-align: middle;
}

这似乎可行

Answer 2

我知道很恐怖，但是我花了很多时间试图在中间垂直对齐，然后把它放在一张桌子里。

另一种方法是使用JavaScript来获取父高度和元素高度，并计算填充以使其精确地位于中间。

最好的方法是设计一个不需要像素精度的设计，但不幸的是它并不总是我的选择。

在这种情况下，将font-size: 0添加到容器中应该有效。

Answer 3

使用文本属性来居中图像或其他元素可能会很痛苦。如果您知道图像的大小，请使用绝对定位：

.container {
    position: relative;
    height: 50px;
    width: 80px;
    background-color: gray;
    text-align: center;
}

img {
    position: absolute;
    top: 50%;
    margin-top: -23px;
    left: 50%;
    margin-left: -23px;
}

将包含单行的框中的内嵌图像垂直居中

3 个答案: