how can I align to middle by height [duplicate]

Question

This question already has an answer here:

• Best way to center a <div> on a page vertically and horizontally? [duplicate] 30 answers
• How do I vertically center text with CSS? [duplicate] 38 answers

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

Set the line-height to the height of the div.

So

.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
}

Working example: http://jsfiddle.net/jasongennaro/DhHnZ/1/

Answer 3

What usually works fine is line-height:

line-height: 32px;

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