div中的垂直对齐图像[复制]

This question already has an answer here:

这个问题在这里已有答案：

How to vertically align an image inside a div? 31 answers
如何垂直对齐div内的图像？ 31个答案

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!

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

3 个解决方案

#1

130

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相同，并且它将垂直居中。然后只需将text-align添加到水平居中。

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:

无论尺寸如何，图像都将始终水平和垂直居中。这是另外2个具有不同尺寸的图像的示例：

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

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

UPDATE

UPDATE

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

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

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

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

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

为什么这很重要？随着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.

使用此转换：translate（）;方法，你甚至不需要在容器中有一个固定的高度，它是完全动态的。你的元素有固定的高度或宽度？你的容器也是？没有？没关系，它将始终居中，因为所有居中属性都固定在子节点上，它独立于父节点。谢谢CSS3。

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.

如果您只需要在一个维度中居，则可以使用translateY或translateX。试试吧，你会看到它是如何运作的。此外，尝试更改翻译的值，您会发现它对一堆不同的情况很有用。

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.

有关转换的更多信息，这是一个很好的资源。

Happy coding.

快乐的编码。

#2

Old question but nowadays CSS3 makes vertical alignment really simple!

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

Just add to the <div> this css:

只需添加到

这个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>

#3

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/

#1

130