html - 我怎样才能按高度对齐到中间

Question

<分区>

Answer 1

如果你想中间对齐多行的 block ，你可以在该 block 周围使用display:inline-block。所以如果你有:

<div class="messageInfo">
   <div class="messageInner">You are logged out<br>You are crazy<br> gogo</div>
</div>

与

.messageInfo{
    background: lightskyblue;
    background-image: url(http://i.stack.imgur.com/Z6lkS.png) ;
    background-repeat: no-repeat;
    min-height: 32px;
    vertical-align: middle;
    padding-left:32px;
    line-height:32px;
}

添加

.messageInner {
    display:inline-block;
    line-height:1.2em;
    vertical-align:middle;
}

参见 http://jsfiddle.net/yNpRE/1/和 http://jsfiddle.net/yNpRE/

请注意，虽然这适用于现代浏览器，但不适用于 IE7 或更早版本。