一尘不染

div中的垂直对齐图像

css

我在div中垂直对齐图像时遇到问题

.img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
}

.img_thumb img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
}

<div class="img_thumb">
    <a class="images_class" href="large.jpg" rel="images"><img src="small.jpg" title="img_title" alt="img_alt" /></a>
</div>

据我所知,我需要“显示:块;” 定位图像在中心,这是可行的。同样在教程中,我找到了很多答案,但它们并不是“有用的”,因为我的所有图像都不在同一高度!


阅读 228

收藏
2020-05-16

共1个答案

一尘不染

如果容器中的高度固定,则可以将line-height设置为与高度相同,并且它将垂直居中。然后只需添加text-align使其水平居中即可。

编辑

您的代码应如下所示:

.img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    line-height:120px;
    text-align:center;
}

.img_thumb img {
    vertical-align: middle;
}

更新

现在是2016年(未来!),看起来有些事情正在改变(最终!)。

为什么这么重要?随着 IE8 的宣布 死亡 ,我们终于可以开始使用 CSS3 魔术了。

话虽如此,这是一种在水平和垂直方向上对齐元素的更新方法:

.container {
    position: relative;
}

.container .element {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

使用这种transform: translate();方法,您甚至不需要在容器中设置固定高度, 而是完全动态的
。您的元素具有固定的高度或宽度?您的容器也一样?没有?没关系,它将始终居中,因为所有居中属性都固定在子级上,它独立于父级。谢谢CSS3。

如果只需要在一个维度上居中,则可以使用translateYtranslateX。尝试一会儿,您将了解它的工作原理。另外,尝试更改的值translate,您会发现它在很多情况下都很有用。

2020-05-16