你怎么能对齐一个包含内的图像div?
div
在我的示例中,我需要<img>将<div>带有class ="frame“:
<img>
<div>
class ="frame
<div class="frame" style="height: 25px;"> <img src="http://jsfiddle.net/img/logo.png" /> </div>
.frame的高度是固定的,图像的高度是未知的。.frame如果这是唯一的解决方案,我可以添加新元素。我正在尝试在 Internet Explorer 7 及更高版本、WebKit、Gecko 上执行此操作。
.frame
请参阅此处的 jsfiddle 。
.frame { height: 25px; /* Equals maximum image height */ line-height: 25px; width: 160px; border: 1px solid red; text-align: center; margin: 1em 0; } img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px; } <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=250 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=25 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=23 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=21 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=19 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=17 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=15 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=13 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=11 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=9 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=7 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=5 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=3 /> </div>
据我所知,唯一(也是最好的跨浏览器)方法是在两个元素上都使用inline-block助手。height: 100%``vertical-align: middle
inline-block
height: 100%``vertical-align: middle
所以有一个解决方案:http: //jsfiddle.net/kizu/4RPFa/4570/
.frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; white-space: nowrap; /* This is required unless you put the helper span closely near the img */ 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; }
<div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px /> </div> <div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px /> </div> <div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px /> </div> <div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px /> </div> <div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=17px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=15px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=13px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=11px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=9px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=7px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=5px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=3px /> </div>
或者,如果您不想在现代浏览器中添加额外元素并且不介意使用 Internet Explorer 表达式,则可以使用伪元素并使用方便的表达式将其添加到 Internet Explorer,每个元素仅运行一次,所以不会有任何性能问题:
Internet Explorer:before的解决方案:http: //jsfiddle.net/kizu/4RPFa/4571/expression()
:before
expression()
.frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; white-space: nowrap; text-align: center; margin: 1em 0; } .frame:before, .frame_before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px; } /* Move this to conditional comments */ .frame { list-style:none; behavior: expression( function(t){ t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>'); t.runtimeStyle.behavior = 'none'; }(this) ); }
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=250px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>
这个怎么运作:
vertical-align: middle
当您有一个固定高度的块(inpx或em其他绝对单位)时,您可以设置内部块的高度 in %。
px
em
%
因此,在具有固定高度的块中添加一个inline-blockwith会使其中的另一个元素(在您的情况下)在它附近垂直对齐。height: 100%``inline-block``<img/>
height: 100%``inline-block``<img/>