Question

我在div中的图像vertical-align有问题

.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;”将图像定位在中心并且有效。同样在教程中我找到了很多答案，但它们并不“有用”，因为我的所有图像都不是同一个高度！

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

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

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

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

<强>更新

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

早在2014年，Microsoft announced它将停止在所有版本的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，here's a good resource。
的详细信息
快乐的编码。

Answer 2

旧问题，但现在 CSS3使垂直对齐真的简单！

只需添加到<div>此css：

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

JSFiddle demo

直播示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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/

div中的垂直对齐图像

3 个答案: