我怎样才能与高度对齐

Question

我想创建图像框(带图像).
当文本位于框顶部时,它很难看.

如何将文本与中间对齐？
我试图使用vertical-align,但似乎它不起作用

演示我的代码

编辑:
您的解决方案适用于短消息.
但是,如果它们是多线的,它又是丑陋的.
是否有可能不增加线的尺寸如果我们不需要它？

Answer 1

如果要中间对齐多行的块,可以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或更早版本.

Answer 2

通常可以正常工作的是line-height：

line-height: 32px;

http://jsfiddle.net/DhHnZ/2/