61

我在 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>

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

4

3 回答 3

140

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

这是一个例子：http: //jsfiddle.net/Cthulhu/QHEnL/1/

编辑

您的代码应如下所示：

.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;
}

无论图像大小如何，图像都将始终水平和垂直居中。这里还有 2 个不同尺寸图像的示例：

http://jsfiddle.net/Cthulhu/QHEnL/6/

http://jsfiddle.net/Cthulhu/QHEnL/7/

更新

现在是 2016 年（未来！），看起来有些事情正在发生变化（终于！！）。

早在 2014 年，微软就宣布将停止在所有版本的 Windows 中支持 IE8，并鼓励所有用户更新到 IE11 或 Edge。好吧，这应该在下周二（1 月 12 日）发生。

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

话虽如此，这是一种水平和垂直对齐元素的更新方法：

.container {
    position: relative;
}

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

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

如果只需要在一维上居中，可以使用translateY或translateX。试一试，你就会知道它是如何工作的。此外，尝试更改 的值translate，您会发现它对许多不同的情况很有用。

在这里，有一个新的小提琴：https ://jsfiddle.net/Cthulhu/1xjbhsr4/

有关 的更多信息transform，这里有一个很好的资源。

快乐编码。

于 2012-04-04T10:08:55.293 回答
37

老问题，但现在 CSS3使垂直对齐变得非常简单！

只需添加到<div>这个 css：

display:flex;
align-items:center;
justify-content:center;

JSFiddle 演示

现场示例：

.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;
    display:flex;
    align-items:center;
    justify-content:center;
}
<div class="img_thumb">
    <a class="images_class" href="http://i.imgur.com/2FMLuSn.jpg" rel="images">
       <img src="http://i.imgur.com/2FMLuSn.jpg" title="img_title" alt="img_alt" />
    </a>
</div>

于 2016-06-12T09:17:35.993 回答
5

当您需要为内联和块元素垂直对齐中心时，您不需要定义定位，您可以采用以下想法：-

inline-elements :- <img style="vertical-align:middle" ...>
                   <span style="display:inline-block; vertical-align:middle"> foo<br>bar </span>  

block-elements :- <td style="vertical-align:middle"> ... </td>
                  <div style="display:table-cell; vertical-align:middle"> ... </div>

看演示：- http://jsfiddle.net/Ewfkk/2/

于 2012-04-04T10:34:49.523 回答