垂直对齐DIV中的图像

Question

垂直对齐DIV中的图像

64

我在一个div中使用图片时遇到了vertical-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;
}

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

据我所知，我需要使用"display: block;"来将图像定位在中心位置，这是可行的。此外，在教程中，我发现很多答案，但它们都不太“有用”，因为我的所有图片高度都不相同！

- aainaarz

3个回答

39

虽然这是一个老问题，但是现在使用CSS3可以轻松地实现垂直对齐！只需将以下css添加到<div>中：

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>

- Jaqen H'ghar

很好，如果这是真的新的，我应该害怕使用它吗？ - MarksCode

@MarksCode 它已经兼容所有现代浏览器（IE11+），请参见CanIUse。它也可以在IE10中使用带前缀的版本。 - Jaqen H'ghar

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/

- Shailender Arora

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cthulhu · Accepted Answer

如果您在容器中设置了固定高度，可以将行高设置为与高度相同，它将垂直居中。然后只需添加文本对齐以水平居中即可。

这里是一个例子：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;
}

图像始终会水平和垂直居中，无论其尺寸大小如何。以下是两个具有不同尺寸的图像的示例：

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

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

更新

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

在2014年，Microsoft宣布将停止支持IE8在所有版本的Windows中，并鼓励所有用户升级到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 的值，你会发现它对许多不同情况很有用。

这里有一个新的 fiddle：https://jsfiddle.net/Cthulhu/1xjbhsr4/ 关于 transform 的更多信息，这里有一个好资源。