如何在包含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 class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}

其他回答

你可以这样做:

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";
})

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

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

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

.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/

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    text-align: center;
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

关键属性是显示:表单元格;for.frame.Div.frame显示为与此内联,因此需要将其包装在块元素中。

这适用于Firefox、Opera、Chrome、Safari和Internet Explorer 8(及更高版本)。

更新

对于Internet Explorer 7,我们需要添加一个CSS表达式:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}

想要对齐文本/标题之后且两者都在div中的图像吗?

请参阅JSfiddle或运行代码段。

只需确保所有元素(div、img、title等)都有ID或类。

对于我来说,这个解决方案适用于所有浏览器(对于移动设备,您必须使用@media调整代码)。

h2.h2红色{颜色:红色;字体大小:14px;}.mydiv类{页边空白:30px;显示:块;}img.mydesired类{右边距:10px;显示:块;float:左;/*如果要将文本与同一行上的图像对齐*/宽度:100px;高度:100px;margin-top:-40px/*更改此值以适应页面*/;}<div class=“mydivclass”><br/><img class=“mydesiredclass”src=“https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png"><h2 class=“h2red”>通过负操作img位置在div中的图像后对齐文本</h2></div>