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


当前回答

这可能很有用:

div {
    position: relative;
    width: 200px;
    height: 200px;
}
img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.image {
    min-height: 50px
}

其他回答

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。

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

我的解决方案:http://jsfiddle.net/XNAj6/2/

<div class="container">
    <div class="frame">
        <img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
    </div>
</div>

.container {
    display: table;
    float: left;
    border: solid black 1px;
    margin: 2px;
    padding: 0;
    background-color: black;
    width: 150px;
    height: 150px;
}
.frame {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-width: 0;
}
.img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}

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

.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/

我所知道的唯一(也是最好的跨浏览器)方法是在两个元素上使用高度为100%、垂直对齐为中间的内联块帮助器。

因此有一个解决方案:http://jsfiddle.net/kizu/4RPFa/4570/

.框架{高度:25px;/*等于最大图像高度*/宽度:160px;边框:1px纯红色;空白:nowrap;/*这是必需的,除非您将helper span放在img附近*/文本对齐:居中;边距:1em 0;}.helper{显示:内联块;高度:100%;垂直对齐:中间;}国际货币基金组织{背景:#3A6F9A;垂直对齐:中间;最大高度:25px;最大宽度:160px;}<div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=250px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=25px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=23px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=21px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=19px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=17px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=15px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=13px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=11px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=9px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=7px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=5px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=3px/></div>

或者,如果您不想在现代浏览器中使用额外的元素,也不介意使用Internet Explorer表达式,您可以使用伪元素,并使用方便的表达式将其添加到Internet Explorer中,每个元素只运行一次,这样就不会有任何性能问题:

Internet Explorer的解决方案包括:before和expression():http://jsfiddle.net/kizu/4RPFa/4571/

.框架{高度:25px;/*等于最大图像高度*/宽度:160px;边框:1px纯红色;空白:nowrap;文本对齐:居中;边距:1em 0;}.frame:之前,.frame_前面{内容:“”;显示:内联块;高度:100%;垂直对齐:中间;}国际货币基金组织{背景:#3A6F9A;垂直对齐:中间;最大高度:25px;最大宽度:160px;}/*将此移至条件注释*/.框架{列表样式:无;行为:表达式(函数(t){t.insertAdjacentHTML('afterBegin','<span class=“frame_before”></span>');t.runtimeStyle.behavior='none';}(本));}<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=250px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=25px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=23px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=21px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=19px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=17px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=15px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=13px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=11px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=9px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=7px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“高度=5px/></div><div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“高度=3px/></div>


工作原理:

当两个内联块元素彼此靠近时,可以将每个元素对齐到另一侧,因此使用垂直对齐:中间,您将得到如下结果:当您有一个固定高度的块(以像素、em或其他绝对单位表示)时,可以将内部块的高度设置为%。因此,在具有固定高度的块中添加一个高度为100%的内联块将使其中的另一个内联块元素(在您的情况下是<img/>)垂直靠近它。