如何在包含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浏览器。在另一个浏览器中试用此功能。

其他回答

可以在div中使用表结构

<div class="frame">
     <table width="100%">
         <tr>
            <td vertical-align="middle" align="center" height="25">
                <img src="https://jsfiddle.net/img/logo.png" >  
            </td>
        </tr>
    </table>
</div>

想象一下你有

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

和css:

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

背景图像解决方案

我完全删除了image元素,并使用.frame类将其设置为div的背景

http://jsfiddle.net/URVKa/2/

这至少在Internet Explorer 8、Firefox 6和Chrome 13上运行良好。

我检查过了,这个解决方案无法缩小超过25像素高度的图像。有一个名为backgroundsize的属性可以设置元素的大小,但CSS 3会与Internet Explorer 7的要求相冲突。

我建议你要么重做你的浏览器优先级,为最好的可用浏览器设计,要么获取一些服务器端代码来调整图像大小,如果你想使用这个解决方案。

CSS网格

如果要在图像容器内垂直对齐单个图像,可以使用以下方法:

.img-container {
  display: grid;
}

img { 
  align-self: center;
}

.img容器{显示:栅格;栅格自动流动:列;背景:#BADA55;宽度:1200px;高度:500px;}img.垂直对齐{对齐自身:中心;}<div class=“img container”><img src=“https://picsum.photos/300/300" /><img class=“vertical align”src=“https://picsum.photos/300/300" /><img src=“https://picsum.photos/300/300" /></div>

如果要在图像容器中对齐多个图像,可以使用以下方法:

.img-container {
  display: grid;
  align-items: center;
}

.img容器{显示:栅格;栅格自动流动:列;对齐项目:居中;背景:#BADA55;宽度:1200px;高度:500px;}<div class=“img container”><img src=“https://picsum.photos/300/300" /><img src=“https://picsum.photos/300/300" /><img src=“https://picsum.photos/300/300" /></div>

请注意,我在这两种情况下都使用了grid auto-flow:column,因为否则元素会换行到指定显式网格项的行。在问题代码中,我也看到项目水平居中。在这种情况下,只需使用placeitems:center而不是alignitems:center。

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

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

此处使用的提示如下:

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

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

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