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

当前回答

这段代码对我很有用。

<style>
    .listing_container{width:300px; height:300px;font: 0/0 a;}
    .listing_container:before { content: ' ';display: inline-block;vertical-align: bottom;height: 100%;}
    .listing_container img{ display: inline-block; vertical-align: middle;font: 16px/1 Arial sans-serif; max-height:100%; max-width:100%;}
<style>

<div class="listing_container">
    <img src="http://www.advancewebsites.com/img/theme1/logo.png">
</div>

2017-10-10 10:06:14

其他回答

我为这个老问题添加了一个新的解决方案，因为我发现答案中没有包含我的首选方法。

在每个项目中，在一开始，我创建了2个CSS类

.flex-centered {
    display: flex; 
    flex-direction-column; 
    justify-content:center
}
.abs-centered {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%)
}

根据情况，您可以将两种元素置于中心。

flex centre对于页面上的图像和内容更加通用，abs居中需要一个相对的父级，这对居中的div很好，就像弹出窗口一样。

所以你只要打电话

   <div class='flex-centered'>
        <img>
    </div>

并且图像垂直居中。

.flex居中{显示：柔性；弯曲方向：柱；对齐内容：中心；}/*这也是水平居中*/.m0a时{边距：0自动}/*让一个大家长变成灰色*/.大div｛高度：200px；宽度：200px；背景：#ccc；边界半径：4px；}/*制作一个小div以居中*/.small div｛高度：20px；宽度：20px；背景：红色；}<div class=“flex center big div”><div class=“small div m0a”></div></div>

2022-06-10 08:16:21

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

只是为了这是一个有效的答案，我仍然希望再次发布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

使用table和table cell方法完成这项工作，特别是因为您也针对一些旧浏览器，我为您创建了一个代码段，您可以运行它并检查结果：.包装器{位置：相对；显示：表格；宽度：300px；高度：200px；}.内部{垂直对齐：中间；显示：表格单元格；}<div class=“wrapper”><div class=“inside”><p>请让我居中</p＞</div><div class=“inside”><img src=“https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" /></div></div>

2017-06-28 13:51:25

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

.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

如何在div中垂直对齐图像

推荐文章

最新文章

标签