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

当前回答

只是为了这是一个有效的答案，我仍然希望再次发布jQuery解决方案。这适用于应用了v_align类的每个元素。它将在父元素中垂直居中，在调整窗口大小时将重新计算。

链接到JSFiddle

$(document).ready(function() {
  // Define the class that vertically aligns stuff
  var objects = '.v_align';
  // initial setup
  verticalAlign(objects);

  // Register resize event listener
  $(window).resize(function() {
    verticalAlign(objects);
  });
});

function verticalAlign(selector) {
  $(selector).each(function(val) {
    var parent_height = $(this).parent().height();
    var dif = parent_height - $(this).height()
    // Should only work if the parent is larger than the element
    var margin_top = dif > 0 ? dif/2 : 0;
    $(this).css("margin-top", margin_top + "px");
  });
}

2014-04-10 18:44:44

其他回答

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

2011-09-07 16:31:30

我不确定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 class="wrap">
    <img src="#">
</div>

和css：

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}

2019-08-25 13:17:13

您可以尝试以下代码：

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

2016-12-15 11:17:57

使用表格和表格单元格的解决方案

有时应该通过显示为表格/表格单元格来解决。例如，快速标题屏幕。这也是W3推荐的方法。我建议您检查W3C.org中名为“块或图像居中”的链接。

此处使用的提示如下：

绝对定位容器显示为表格与显示为表格单元格的中心内容垂直对齐

.容器{位置：绝对；显示：表格；宽度：100%；高度：100%；}.内容{显示：表格单元格；垂直对齐：中间；}<div class=“container”><div class=“content”>世界和平</h1></div></div>

就我个人而言，我实际上不同意为此目的使用助手。

2017-04-09 15:16:01

如何在div中垂直对齐图像

推荐文章

最新文章

标签