如何在包含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>


当前回答

此外,您可以使用Flexbox获得正确的结果:

.父级{对齐项目:居中;/*用于垂直对齐*/背景:红色;显示:柔性;高度:250px;/*对齐内容:中心;<-用于水平对齐*/宽度:250px;}<div class=“parent”><img class=“child”src=“https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" /></div>

其他回答

这适用于现代浏览器(编辑时为2016年),如codepen上的演示所示

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

给图像一个类或使用继承来以需要居中的图像为目标是非常重要的。在本例中,我们使用了.frame img{},因此只有由类为.frame的div包装的图像才会成为目标。

使用table和table cell方法完成这项工作,特别是因为您也针对一些旧浏览器,我为您创建了一个代码段,您可以运行它并检查结果:.包装器{位置:相对;显示:表格;宽度:300px;高度:200px;}.内部{垂直对齐:中间;显示:表格单元格;}<div class=“wrapper”><div class=“inside”><p>请让我居中</p></div><div class=“inside”><img src=“https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" /></div></div>

您可以尝试将PI的CSS设置为显示:table cell;垂直对齐:中间;

对于更现代的解决方案,如果不需要支持旧版浏览器,您可以这样做:

.框架{显示:柔性;/**取消注释下面的“对齐内容”,使其水平居中。✪ 阅读以下内容,了解垂直和水平居中的更好方法。**//*对齐内容:中心*/对齐项目:居中;}国际货币基金组织{高度:自动;/**✪ 为了使该图像垂直和水平居中,在上面的.frame规则中,注释“justify content”和“对齐项目”声明,然后取消注释“margin:auto;”在下面**//*边距:自动*/}/*演示不需要的造型材料*/.框架{最大宽度:900px;高度:200px;边距:自动;背景:#222;}p型{最大宽度:900px;边距:20px自动0;}国际货币基金组织{宽度:150px;}<div class=“frame”><img src=“https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png"></div>

这是一支使用Flexbox的钢笔:http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

编辑1/13/22

有一种更好的方法可以使用CSS网格和地方内容速记来实现这一点:

.frame文本网格{显示:栅格;放置内容:中心;/**✪ “放置内容”是“对齐内容”和“调整内容”的缩写。✪ “放置内容”速记需要两个值,第一个用于“对齐内容”,第二个用于“调整内容”。如果仅存在一个值(如本演示中所示),则该值将应用于两个方向。✪ 注释上面的“place content:center;”声明,以查看元素如何沿着容器的高度分布。**/}<div class=“ctnr框架文本网格”><h2>使用Grid和<code>放置内容</code></h2><p>垂直和水平居中只需要两条线</p></div>

这是一支使用CSS网格的钢笔:https://codepen.io/ricardozea/pen/c4e27f1e74542618d73e21f7c2276272?editors=0100

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    text-align: center;
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

关键属性是显示:表单元格;for.frame.Div.frame显示为与此内联,因此需要将其包装在块元素中。

这适用于Firefox、Opera、Chrome、Safari和Internet Explorer 8(及更高版本)。

更新

对于Internet Explorer 7,我们需要添加一个CSS表达式:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}