如何在div中垂直对齐图像

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

当前回答

我所知道的唯一（也是最好的跨浏览器）方法是在两个元素上使用高度为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/>）垂直靠近它。

2011-09-05 16:04:27

其他回答

使用此选项：

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

你可以改变字体大小。

2017-06-02 01:17:32

可以在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>

2017-06-21 08:42:49

如果您可以使用像素大小的边距，只需添加字体大小：1px；但请记住，现在在.frame 1em=1px上，这意味着您也需要设置像素的边距。

http://jsfiddle.net/feeela/4RPFa/96/

现在它不再以歌剧为中心了…

2011-09-07 16:49:53

我也有同样的问题。这对我有用：

<style type="text/css">
    div.parent {
        position: relative;
    }

    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>

<div class="parent">
    <img class="child">
</div>

2013-01-26 19:46:52

matejkramny的解决方案是一个良好的开端，但超大图像的比例错误。

这是我的叉子：

演示：https://jsbin.com/lidebapomi/edit?html，css，输出

HTML格式：

<div class="frame">
  <img src="foo"/>
</div>

CSS:

.frame {
    height: 160px; /* Can be anything */
    width: 160px; /* Can be anything */
    position: relative;
}
img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

2013-09-18 09:53:32

如何在div中垂直对齐图像

推荐文章

最新文章

标签