centering text inside a div

css, html

Solution

Don't use tables for this kind of things. It isn't something you can solve by using a table.

For what I can see, it is working perfect. Here is a working example: http://jsfiddle.net/T7V58/1/

Your code is correct, what is the problem? Just remove the `p` tag and you are there.

<div class="playerDetailsPage">
           <h4>The text will be in the center</h4>
    </div>

CSS:

   .playerDetailsPage {
    background-color: #edd4d4; 
    width: 630px;
    height: 390px;
    text-align: center; 
    vertical-align: middle;
    line-height: 390px;
}

Problem

I am trying to center text(horizontal and vertical) and I am having a little difficulty with this. This is what I have tried but is only centering it horizontally, not vertically. How can I get this text in the center? ``` <div class="playerDetailsPage"> <p> <h4>The text will be in the center</h4> </p> </div> ``` css ``` .playerDetailsPage { background-color: #edd4d4; width: 630px; height: 390px; text-align: center; vertical-align: middle; line-height: 390px; } ```

Original source