Equivalent of valign=center for <p> with css

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 aligne开发者_StackOverflow中文版d in the center of the p tag

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

Is there a way to do this?

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/

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;

It's not as simple as just assigning vertical-align:middle. That style is 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/

Simply change your paragraph's display attribute to table-cell, then apply display: table; width: 100%; to your paragraph's container.

<div style="display:table; width:100%">
  <p align="justify" style="font-size:10pt;display:table-cell; height:200px;vertical-align:middle; background-color:rgba(255,0,0,0.3)"> 
    Content
  </p> 
</div>

jsFiddle

Careful, you may need to use some type of modernizer, since IE7 does not support this CSS property.

Changing your display to table-cell will allow you to act as if the paragraph is a, well, table cell.

Here is a fiddle so you can play around with it ( http://jsfiddle.net/stillb4llin/RxpFF/ ). I put a border around so you can see the outside of the paragraph.

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.

As in a similar question, use display: inline-block with a placeholder element to vertically center the text inside of a block element:

<!doctype html>
<html lang="en">
<head>
 <style type="text/css">
 #blockbox { height: 500px; border: 1px solid black;}
 #container, #placeholder { height: 100%; }

 #content, #placeholder { display:inline-block; vertical-align: middle; }
 </style>
</head>

<body>
 <div id="blockbox">
  <p id="container">
    <span id="content">
    Content
    </span>
    <span id="placeholder"></span>
  </p>
 </div>
</body>
</html>

Vertical alignment is only applied to inline elements or table cells, so use it along with display:inline-block or display:table-cell with a display:table parent when vertically centering block elements.

References:

CSS Horizontal and Vertical Centering

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