标签：ext 自动 代码 blog order ati 技术 block images
方法一：
这种方法可实现图片超出frame尺寸时，自动选择水平、垂直居中，效果如下
<div class="frame"> <img src="foo"/> </div> .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; }
demo： 图片居中
方法二：
原理是，使用协助元素（这里是span），作为img的相邻元素，同为inline-block的两元素相邻时增加vertical-align: middle
可使两元素垂直居中，代码如下
<div class=frame> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250 /> </div> .frame { height: 25px; /* equals max image height */ width: 160px; border: 1px solid red; white-space: nowrap; text-align: center; margin: 1em 0; } .helper { display: inline-block; height: 100%; vertical-align: middle; } img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px; }
demo： 图片居中
标签：ext 自动 代码 blog order ati 技术 block images
原文地址：http://www.cnblogs.com/skura23/p/6815989.html
