CSS div中的垂直对齐图像

vertical-align image in div

提问by aainaarz

i have problem with image vertical-align in div

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

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!

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

回答by Cthulhu

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.

如果你的容器有一个固定的高度，你可以将 line-height 设置为与 height 相同，它会垂直居中。然后只需添加文本对齐到水平居中。

Here's an example: http://jsfiddle.net/Cthulhu/QHEnL/1/

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

EDIT

编辑

Your code should look like this:

您的代码应如下所示：

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

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/6/

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

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

UPDATE

更新

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

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

Back in 2014, Microsoft announcedthat 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).

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

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

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

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%);
}

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.

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

If you only need to center in one dimension, you can use translateYor 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.

如果您只需要在一维上居中，您可以使用translateY或translateX。只要尝试一段时间，你就会看到它是如何工作的。此外，尝试更改 的值translate，您会发现它适用于许多不同的情况。

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

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

For more information on transform, here's a good resource.

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

Happy coding.

快乐编码。

回答by Jaqen H'ghar

Old question but nowadaysCSS3makes vertical alignment really simple!

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

Just add to the <div>this css:

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

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

---

---

JSFiddle demo

JSFiddle 演示

Live Example:

现场示例：

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

回答by Shailender Arora

you don't need define positioning when you need vertical align center for inline and block elements you can take mentioned below idea:-

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

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>

see the demo:- http://jsfiddle.net/Ewfkk/2/

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