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

Posted 2023-03-05

【中文标题】div中的垂直对齐图像[重复]

【英文标题】：vertical-align image in div [duplicate]

【发布时间】：2012-04-18 00:23:45

【问题描述】：

我在 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"  /></a>
</div>

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

【参考方案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/

更新

现在是 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的更多信息。

编码愉快。

【讨论】：

Cthulhu 的答案是正确的，但是如果您检查图像上方和之后的像素，您会注意到 div 有一个烦人的 3 像素填充顶部（这取决于字体大小）。要摆脱它，只需添加 font-size: 0;到 div。

这似乎是一个如此简单的解决方案，但我无法让它发挥作用。在隔离了我的 wordpress 模板的每一部分之后，我发现我的 doctype 是问题所在。从 4.0 过渡到 html5 文档类型，这工作！希望这会帮助其他可能遇到同样问题的人

这个答案的 2016 年更新是黄金！ ;)

感谢您更新 2016 年的答案。像魅力一样工作！！！

那次更新很关键！泰！！

【参考方案2】：

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

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

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

---

JSFiddle demo

实例：

.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"  />
    </a>
</div>

【讨论】：

很好，如果它真的很新，我应该害怕使用它吗？

@MarksCode 它已经与所有现代浏览器（IE11+）兼容，请参阅CanIUse。它也可以在 IE10 中使用 prefixed version

【参考方案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/