问题

Question

如何对齐包含div的图片?

Example

在我的示例中,我需要垂直居中< div> 中的< img> class ="frame `:

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

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

请参阅jsfiddle: http://jsfiddle.net/4RPFa/61/



解决方法

我知道的唯一(和最好的跨浏览器)方式是使用 inline-block 帮助与 height:100% align:middle .

因此,有一个解决方案: http://jsfiddle.net/kizu/4RPFa/4570/ < / a>

.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;
}
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>

或者,如果您不想在现代浏览器中添加额外的元素,并且不介意使用IE表达式,则可以使用伪元素,并使用方便的表达式将其添加到IE,该表达式每次只运行一次元素,因此不会有任何性能问题:

解决方案使用:before expression(): http://jsfiddle.net/kizu/4RPFa/4571/

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


运作方式:

  1. When you have two inline-block elements near each other, you can align each to other's side, so with vertical-align: middle you'll get something like this:

    Two aligned blocks

  2. When you have a block with fixed height (in px, em or other absolute unit), you can set the height of inner blocks in %.

  3. So, adding one inline-block with height: 100% in a block with fixed height would align another inline-block element in it (<img/> in your case) vertically near it.



相关问题推荐