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

当前回答

一个对我有用的简单方法：

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

它适用于谷歌Chrome浏览器。在另一个浏览器中试用此功能。

2015-10-18 17:03:53

其他回答

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

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

2018-04-22 16:16:49

此外，您可以使用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>

2018-08-24 13:09:43

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

2011-09-01 17:29:55

您可以尝试以下代码：

.框架{显示：柔性；对齐内容：中心；对齐项目：居中；宽度：100%；}<div class=“frame”style=“height:25px；”><img src=“http://jsfiddle.net/img/logo.png" /></div>

2016-12-15 11:17:57

使用此选项：

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

你可以改变字体大小。

2017-06-02 01:17:32

如何在div中垂直对齐图像

推荐文章

最新文章

标签