how can I align to middle by height [duplicate]

问题

This question already has answers 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)

Closed 4 years ago.

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?

回答1:

What usually works fine is line-height:

line-height: 32px;

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

回答2:

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.

回答3:

Set the line-height to the height of the 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
}

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

来源：https://stackoverflow.com/questions/7542387/how-can-i-align-to-middle-by-height

标签

html

css

background-image

vertical-alignment