how can I align to middle by height

This question already has an answer here:

Best way to center a <div> on a page vertically and horizontally? 29 answers

How do I vertically center text with CSS? 34 answers

---

What usually works fine is line-height :

line-height: 32px;

http://jsfiddle.net/DhHnZ/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.

---

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/

链接地址: http://www.djcxy.com/p/41658.html

上一篇: 我如何垂直居中文本？

下一篇: 我怎样才能对齐到中间高度