我怎样才能按高度对齐到中间[重复]答案

【问题标题】：how can I align to middle by height [duplicate]我怎样才能按高度对齐到中间[重复]
【发布时间】：2011-11-24 10:29:42
【问题描述】：

我想创建图像框（带图像）。
当文本在框的顶部时很难看。

如何使文本居中对齐？
我尝试使用vertical-align，但它似乎不起作用

Demo of my code

编辑：
您的解决方案适用于短消息。
但是如果它们是多线的，那就又丑了。
如果我们不需要，是否可以不增加行的大小？

【问题讨论】：

标签： html css background-image vertical-alignment

【解决方案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 或更早版本。

【讨论】：

【解决方案2】：

通常工作正常的是line-height:

line-height: 32px;

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

【讨论】：

适用于 1 行消息。但是，如果它是多线的，是否可以不增加它的大小？示例：jsfiddle.net/mRbgq
如果您期望多行，我建议使用padding-top: 8px; padding-bottom: 8px; 而不是行高。（字体大小：16px + 8px 上方 + 8px 下方 = 32px 总高度）
见jsfiddle.net/mRbgq/2

【解决方案3】：

将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/

【讨论】：

适用于 1 行消息。但是，如果它是多线的，是否可以不增加它的大小？示例：jsfiddle.net/mRbgq