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, but vertical-align:middle doesn't seem to be doing the trick. Is there a way to do this?

Answer 1

It's not as simple as just assigning vertical-align:middle. This style for tables. To vertically align without tables, you can use one of the techniques shown here:

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

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;

Answer 3

the easiest way you can do that I think would be to use padding-top and amount of that padding depends on your text size ofcourse.

so for example for a 30px height div that contains a 10px font then the padding-top is 10px in addition you need to remember to take the amount you add as padding-top to be removed from height.

Meaning if you were mentioning the height in the css as fixed 30px then after applying the 10px padding-top you should make that fix height 20px.

vertical-align property is for setting the vertical alignment of the container not the content.

Answer 4

The easiest way would be to wrap it in a table like so:

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

Oh, and align="justify" should be moved to CSS as text-align: justify