div中的垂直对齐图像

Question

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

如果容器中的高度固定,则可以将line-height设置为与height相同,并且它将垂直居中.然后只需将text-align添加到水平居中.

这是一个例子: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或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,你会发现它对一堆不同的情况很有用.

在这里,有一个新的小提琴: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/