我怎样才能与高度对齐

Question

我想创建图像框（带图像） 当文本位于框顶部时，这很难看。

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

Demo of my code

修改
您的解决方案可以很好地处理短消息 但是，如果它们是多线的，它又是丑陋的 是否有可能不增加线的大小如果我们不需要它？

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/

Answer 3

将line-height设置为height的{​​{1}}。

所以

div

工作示例： http://jsfiddle.net/jasongennaro/DhHnZ/1/