在DIV [重复]垂直对齐图像在DIV [重复]垂直对齐图像(vertical-align imag

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

如何垂直对齐一个div内的图像？ 34个回答

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

至于我知道我需要“显示：块;” 在中心定位图像和工作。此外，在教程我发现很多答案，但它们不是“有用的”，因为所有的我的形象都不在同一高度！

Answer 1:

如果你在你的容器有一个固定的高度，你可以设置行高度是一样的高度，它会垂直居中。然后，只需添加文本对齐水平居中。

这里有一个例子： 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/

UPDATE

它现在2016（未来！），看起来像一些事情正在发生变化（最后!!）。

早在2014年，微软宣布，它将停止在所有版本的Windows支持IE8，并鼓励所有用户更新到IE11或边缘。那么，这是应该发生的下周二（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 ，这里是一个很好的资源。

编码愉快。

Answer 2:

老问题，但现在 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>

Answer 3:

你当你需要，你可以在下面的想法采取提到的内联和块元素垂直居中对齐不需要定义定位： -

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/

文章来源: vertical-align image in div [duplicate]