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


当前回答

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

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

其他回答

使用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>

背景图像解决方案

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

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

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

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

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

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

除了像这样的文本外,还可以将图像居中放置在容器内(可以是徽标):

基本上,您可以包装图像

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

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

在每个项目中,在一开始,我创建了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>