image - 在div 如何垂直对齐图像

  显示原文与译文双语对照的内容

.frame element,如何正确vertical-align这个 image:


<div class="frame" style="height: 25px;">
 <img src="http://jsfiddle.net/img/logo.png"/>
</div>

.frame 高度是固定的,图像高度未知。 我可以在 .frame 中添加新元素,如果这是唯一的解决方案。 我试图在 IE≥7,web kit,Gecko上做这个。

在这里查看 jsfiddle: http://jsfiddle.net/4RPFa/61/

时间:

纯CSS解决方案:

http://jsfiddle.net/3MVPM/

CSS:


.frame { 
 margin: 1em 0; 
 height: 35px;
 width: 160px;
 border: 1px solid red;
 position: relative;
} 
img { 
 max-height: 25px; 
 max-width: 160px; 
 position: absolute; 
 top: 0; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 margin: auto; 
 background: #3A6F9A; 
}

关键内容


//position: relative; - in. frame holds the absolute element within the frame
//top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
//margin: auto; - centers the image horizontally & vertically

通过这种方式,你可以将图像垂直居中( 演示 ):


div{
 height:150px;//IE7fix
 line-height: 150px;
}
img{
 vertical-align: middle;
 margin-bottom:0.25em;
}

解决方案matejkramny是个好开端,但超大图像的具有错误的比率。
这是我的叉子:

演示:http://jsbin.com/zepilidena/1/edit?html,css,output

preview


html :

<div class="frame">
 <img src=foo"/>
</div>

css:


.frame { 
 height: 160px;/*can be anything*/
 width: 160px;/*can be anything*/
 position: relative;
}
img { 
 max-height: 100%; 
 max-width: 100%; 
 width: auto;
 height: auto;
 position: absolute; 
 top: 0; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 margin: auto;
}

3 行解决方案:


position: relative;
top: 50%;
transform: translateY(-50%);

这适用于任何东西。

来自

idk如果这是你正在寻找的解决方案,但你可以这样做:

http://jsfiddle.net/DZ8vW/1


.frame {
 height: 25px;/* equals max 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 */
} 



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

http://jsfiddle.net/MBs64/


.frame {
 height: 35px;/* equals max 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;
}

关键属性是显示: table-cell ;对于. frame. Div.frame,显示为内嵌的,所以你需要将它封装在块元素中。

在 Opera,Chrome,Safari和 IE8+ 中工作。

更新

对于 IE7,我们需要添加一个css表达式:


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

的背景图像解决方案我将图像元素全部删除,并将它的设置为 .frame 元素的背景

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

至少在 IE8,FF6和Chrome13上工作良好

我检查过了,这个解决方案将无法缩小图像,然后显示 25像素高度。 有一个名为 background-size的属性设置了元素的大小,但它是 CSS3,它与IE7需求冲突。

标识建议你重新设置浏览器优先级并为最佳可用浏览器设计设计,或者获取一些服务器端代码来调整图像大小,如果你想使用这个解决方案

...