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

当前回答

你可以这样做：

Demo

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;
    
    text-align: center; 
    margin: 1em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 160px;
    top: 50%;           /* Here.. */
    left: 50%;          /* Here... */
    position: absolute; /* And here */
}

JavaScript

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})

2011-09-04 17:34:04

其他回答

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。

2020-11-10 21:40:53

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

除了像这样的文本外，还可以将图像居中放置在容器内（可以是徽标）：

基本上，您可以包装图像

.外框{边框：1px纯红色；最小高度：200px；文本对齐：居中；/*仅水平对齐*/}.包装器{线条高度：200px；边框：2px蓝色虚线；边框半径：20px；边距：50px}国际货币基金组织{/*高度：自动*/垂直对齐：中间；/*仅垂直对齐*/}<div class=“外框”><div class=“wrapper”>一些文本<img src=“http://via.placeholder.com/150x150"></div></div>

2017-08-31 01:36:16

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

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

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

2011-09-07 16:49:53

flexbox有一个超级简单的解决方案！

.frame {
    display: flex;
    align-items: center;
}

2016-04-21 00:56:41

如何在div中垂直对齐图像

推荐文章

最新文章

标签