Question

The point is that I have set vertical-align: center property

I have a p:

<p><span>Hello World</span></p>​

p{
    text-align:center;
    height:200px;
    width:200px;
    border:1px black solid;
}
span{
    vertical-align: middle;
    display:inline-block;
}

Here is the demo:http://jsfiddle.net/hh54188/yhLqV/2/

I want the text in the paragraph could be center at both vertical and horizontal direction

but the span‘s vertical-align property doesn’t work?Why?

I get some advises about set the line-height equal to the parent’s height, it works only when there is only one line in the parent box.

How can I achieve my goal(may be I can use some css3 property)? Set the inner element at the center of parent vertical direction

Answer 1

Hi you can achieve your desired results through the mentioned below CSS code :-

You can give the display:table to the parent and display:table-cell; & vertical-align:middle; to the Child than you will be to get your desired results as mentioning below the CSS & Demo link…

CSS

p{
    text-align:center;
    height:200px;
    width:200px;
    border:1px black solid;
    display:table;

}
span{
    vertical-align: middle;
    display:table-cell;
} 

here is the demo :- http://jsfiddle.net/yhLqV/5/