vertical-align image in div [英] vertical-align image in div

问题描述

我有一个问题与图像vertical-align在div

i have problem with image vertical-align in 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>

至于我知道我需要display：block;将图像定位在中心并工作。
在教程中我发现很多答案，但他们不是有用的，因为我的图像不在同一高度！

As far as i know i need "display: block;" to position image in center and that works. Also in tutorials i find many answers but they are not "useful", because all of my image are NOT at the same height!

推荐答案

如果你的容器中有固定的高度，你可以设置line-height和height一样，垂直居中。

If you have a fixed height in your container, you can set line-height to be the same as height, and it will center vertically. Then just add text-align to center horizontally.

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

EDIT

您的代码应如下所示：

.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个不同尺寸图片的范例：

The images will always be centered horizontally and vertically, no matter what their size is. Here's 2 more examples with images with different dimensions:

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

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

UPDATE

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

It's now 2016 (the future!) and looks like a few things are changing (finally!!).

回到2014年， Microsoft宣布将停止支持IE8在所有版本的Windows和鼓励所有用户更新到IE11或Edge。那么，这应该是在下周二（1月12日）发生。

Back in 2014, Microsoft announced that it will stop supporting IE8 in all versions of Windows and will encourage all users to update to IE11 or Edge. Well, this is supposed to happen next Tuesday (12th January).

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

Why does this matter? With the announced death of IE8, we can finally start using CSS3 magic.

水平和垂直对齐元素的更新方式：

With that being said, here's an updated way of aligning elements, both horizontally and vertically:

.container {
    position: relative;
}

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

使用此 transform：translate（） code>方法，你甚至不需要在你的容器中有一个固定的高度，它是完全动态。你的元素有固定的高度或宽度？你的容器吗？没有？没关系，它将始终是中心的，因为所有的居中属性都是固定在子节点上的，它与父节点无关。

Using this transform: translate(); method, you don't even need to have a fixed height in your container, it's fully dynamic. Your element has fixed height or width? Your container as well? No? It doesn't matter, it will always be centered because all centering properties are fixed on the child, it's independent from the parent. Thank you CSS3.

如果您只需要在一个维度中心，您可以使用 translateY 或 translateX 。只是尝试一会儿，你会看到它的工作原理。此外，尝试更改 translate 的值，您会发现它对一系列不同的情况很有用。

If you only need to center in one dimension, you can use translateY or translateX. Just try it for a while and you'll see how it works. Also, try to change the values of the translate, you will find it useful for a bunch of different situations.

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

Here, have a new fiddle: https://jsfiddle.net/Cthulhu/1xjbhsr4/

有关 transform ，这里是一个很好的资源。

快乐编码。

这篇关于vertical-align image in div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！