使用“垂直对齐”在div中居中放置文本

Question

the title pretty much sums it up. I have the following code:

<div class="container">
   <p>Hello world</p>
</div>

And CSS:

.container{
    width: 100%;
    height: 50px;    
    background-color: lightblue;
    vertical-align: middle; /* Why you no work!?!? */
}

But the text is not vertically aligning in the div. I'm clearly missing something here or don't understand a certain concept. Anybody tell me what's happening?

Thanks!

Answer 1

if you have single line text add this to your css.

.container > p{ line-height:50px; }

Answer 2

To use vertical-align: middle , you need to use display: inline-block .

Your code will change to this:

.container{
    display: inline-block; /* This is the line you need to introduce */
    width: 100%;
    height: 50px;    
    background-color: lightblue;
    vertical-align: middle;
}

You can take a look at the demo .

Update

Using display: table for .container and display: table-cell for .container p makes it work.

Updated demo

.container{
    display: table;
    width: 100%;
    height: 200px;
    background-color: lightblue;
    vertical-align: middle;
}
.container p {
    display: table-cell;
    vertical-align: middle;
}

Answer 3

Vertical alignment in CSS is not as straightforward as horizontal alignment.

Depending on your case and the content you need to apply one technique or another.

You can check this link for different techniques:

http://www.vanseodesign.com/css/vertical-centering/

In short, vertical-align: center; is not going to work in your case

Answer 4

Add to your container the display property as follows:

.container{
    width: 100%;
    height: 50px;    
    background-color: lightblue;
    display:inline-block; 
    vertical-align: middle; 
}