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

当前回答

这样，您可以将图像垂直居中（演示）：

div{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}

2013-11-22 16:03:29

其他回答

背景图像解决方案

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

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

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

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

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

2011-09-04 13:17:02

这适用于现代浏览器（编辑时为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

这可能很有用：

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

2012-07-30 05:57:45

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

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

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

2015-10-18 17:03:53

我不确定InternetExplorer，但在Firefox和Chrome下，如果您在div容器中有img，以下CSS内容应该可以工作。至少对我来说，它工作得很好：

div.img-container {
    display: table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}

2014-01-29 07:10:19

如何在div中垂直对齐图像

推荐文章

最新文章

标签