我怎样才能对齐到中间高度
这个问题在这里已经有了答案:
通常工作正常的是line-height
:
line-height: 32px;
http://jsfiddle.net/DhHnZ/2/
如果要用多行对齐一个块,可以在该块周围使用display:inline-block
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或更早版本。
将line-height
设置为div
的height
。
所以
.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; //ADD THIS
}
工作示例: http : //jsfiddle.net/jasongennaro/DhHnZ/1/
链接地址: http://www.djcxy.com/p/41657.html