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


当前回答

使用此选项:

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

你可以改变字体大小。

其他回答

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

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

这适用于现代浏览器(编辑时为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包装的图像才会成为目标。

我一直在使用填充物进行中心对齐。您需要定义顶级外部容器大小,但内部容器应该调整大小,并且可以将填充设置为不同的百分比值。

小提琴演奏家

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}

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

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

此处使用的提示如下:

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

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

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