div中的垂直对齐图像

小编典典

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>

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

阅读 239

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。

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

2020-05-16