如何在包含div内对齐图像?

实例

在我的示例中,我需要使用class=“frame”将<img>垂直居中放置在<div>中:

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frame的高度是固定的,图像的高度是未知的。如果这是唯一的解决方案,我可以在.frame中添加新元素。我正在尝试在Internet Explorer 7和更高版本WebKit、Gecko上执行此操作。

看到这里的jsfiddle。

.框架{高度:25px;/*等于最大图像高度*/线条高度:25px;宽度:160px;边框:1px纯红色;文本对齐:居中;边距:1em 0;}国际货币基金组织{背景:#3A6F9A;垂直对齐:中间;最大高度:25px;最大宽度:160px;}<div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=250/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=25/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=23/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=21/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=19/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=17/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=15/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=13/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=11/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=9/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=7/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=5/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=3/></div>


当前回答

一个对我有用的简单方法:

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

它适用于谷歌Chrome浏览器。在另一个浏览器中试用此功能。

其他回答

您可以尝试以下代码:

.框架{显示:柔性;对齐内容:中心;对齐项目:居中;宽度:100%;}<div class=“frame”style=“height:25px;”><img src=“http://jsfiddle.net/img/logo.png" /></div>

flexbox有一个超级简单的解决方案!

.frame {
    display: flex;
    align-items: center;
}

使用表格和表格单元格的解决方案

有时应该通过显示为表格/表格单元格来解决。例如,快速标题屏幕。这也是W3推荐的方法。我建议您检查W3C.org中名为“块或图像居中”的链接。

此处使用的提示如下:

绝对定位容器显示为表格与显示为表格单元格的中心内容垂直对齐

.容器{位置:绝对;显示:表格;宽度:100%;高度:100%;}.内容{显示:表格单元格;垂直对齐:中间;}<div class=“container”><div class=“content”>世界和平</h1></div></div>

就我个人而言,我实际上不同意为此目的使用助手。

可以使用网格布局垂直居中图像。

.frame {
  display: grid;
  grid-template-areas: "."
                       "img"
                       "."
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: auto;
}
.frame img {
  grid-area: img;
}

这将创建一个3行1列的网格布局,顶部和底部有未命名的1个分数宽的间隔,以及一个名为img的自动高度(内容大小)区域。

img将使用它喜欢的空间,顶部和底部的分隔符将使用剩余的高度分割成两个相等的分数,从而使img元素垂直居中。

http://jsfiddle.net/Kissaki0/4RPFa/20713/

想象一下你有

<div class="wrap">
    <img src="#">
</div>

和css:

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}