Equivalent of valign=center for <p> with css

Question

I have the following code on my page:

<p align="justify" 
   style="font-size:10pt;display:block;height:200px;vertical-align:middle;"> 
  Content
</p> 

I want the text to be vertically aligned in the center of the p tag

Using vertical-align:middle doesn't seem to work.

Is there a way to do this?

Answer 1

Here's a solution that avoids using <table> tags.

It works on Internet Explorer 8 and 9, Chrome, Firefox, and Safari (but not IE7 though but last time I checked they're at about 2% market share world wide).

First, get rid of the notion of trying to trying vertically align text within a paragraph tag - instead think in terms of aligning a paragraph within a container.

Use the markup ...

<div class="container">
    <p>The text that you'd wish to have vertically aligned in the middle of the
       container...which might be like an article column, or whatever</p>
</div>

and the CSS

.container{
     border: 1px solid red; /*to see the example*/
     display: table-cell;
     height: /* insert whatever height you want*/;
     vertical-align: middle;
 }

This will vertically align the paragraph to be in the vertical center of the container element.

Now a really fun solution is when you have a parent container full of content that you want to have all of the children in side by side and perfectly vertically aligned to the middle as well.

Of course, use this version is if you have a specific size you want the parent container to be:

The markup:

<div class="containerTwo">
     <p>here's some text and stuffs, make this whatever the heck 
     you want it to be</p>
     <p>these can be any height and, really any element, the magic
     is in the display property of the elements so this still 
     looks pretty semantic</p>
     <p>more stuff and this could be like an image or something</p>
</div>

The CSS:

.containerTwo{
     border: 1px solid green; /* for sake of the example */
     display: table-cell;
     height: /* what you want it to be */;
     vertical-align: middle;
}
.containerTwo p{
     border: 1px solid blue; /* for sake of example */
     display: inline-block;
     width: 30%; /* all of the child elems shouldn't go over 100% */
     vertical-align: middle;
}

This will produce a parent element, of any height of your choice with all of it's children perfectly aligned in the middle. An even COOLER solution that doesn't even require display: table-cell is possible when you have a bunch of different height elements that you all want to align in the middle with each other and you don't want to specify a height for the parent element but just want it to stretch to the height of the largest child element: (oh and this works in IE7)

The markup:

<div class="containerThree">
    <p>this is more text that you might want to have 
       vertically aligned in the middle with the others</p>
    <p>so here's a sibling paragraph you might want to 
       have aligned next to the other.</p>
    <div title="a really big element!"></div>
    <p>like the last one, the width can't add up to more
       than 100% of the parent element, otherwise they just
       wrap.  But atleast no table-cell!</p>
</div>

The CSS:

.containerThree{
     border: 1px solid purple; /* for the example */
     /* and that's it!!! */
}

.containerThree p, .containerThree div{
     border: 1px solid blue;
     width: 20%; /* can't add beyond total width of parent */
     display: inline-block;
     *display: inline; /* ie7 hack */
     zoom: 1; /* ie7 hack */
     vertical-align: middle;

}

.containerThree div{  /* to simulate a big element */
     height: 400px; 
}

For this one, everything will vertically align with each other.

Here's an example on js fiddle for ya to see:

http://jsfiddle.net/NJqMp/1/

Answer 2

If you only have content that will fit in one line you can use a workaround of setting the line-height to the height of the element

line-height:200px;