Как я могу выровнять по середине по высоте

Я хочу создать окно изображения (с изображением).
Это некрасиво, когда текст находится в верхней части окна.

Как выровнять текст до середины? Я пытался использовать vertical-align, но кажется, что он не работает

Демонстрация моего кода

EDIT:
Ваше решение отлично работает с короткими сообщениями.
Но если они будут многослойными, это снова уродливо.
Возможно ли увеличить размер линии Если это нам не нужно?

enter image description here

Ответы

Ответ 2

Если вы хотите, чтобы средний выровнять блок с несколькими строками, вы можете использовать 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 или ранее.

Ответ 3

Установите line-height в height 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; //ADD THIS
}

Рабочий пример: http://jsfiddle.net/jasongennaro/DhHnZ/1/