how can I align to middle by height [duplicate]

Question

I want to create image box(with image).
It's ugly when text is in the top of box.

How can I align text to middle?
I tried to use vertical-align, but it seems, that it don't works

Demo of my code

EDIT:
Your solution works fine with short messages.
But if they will be multi-lined, it is ugly again.
Is it possible to not increase size of line If we don't need it?

Answer 1

If you want to middle align a block with multiple lines, you can use display:inline-block around that block. So if you have:

<div class="messageInfo">
   <div class="messageInner">You are logged out<br>You are crazy<br> gogo</div>
</div>

with

.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

.messageInner {
    display:inline-block;
    line-height:1.2em;
    vertical-align:middle;
}

See http://jsfiddle.net/yNpRE/1/ and http://jsfiddle.net/yNpRE/

Be warned though, that while this works in modern browsers, it doesn't work with IE7 or earlier.

Answer 2

What usually works fine is line-height:

line-height: 32px;

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