Geek Answers Handbook

Equivalent to 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 aligned in the center of the tag p

Usage vertical-align:middledoes not work.

Is there any way to do this?

+5
source share
8 answers

The easiest way is to wrap it in a table as follows:

<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 transferred to CSS as text-align: justify

-10
source

Here is a solution that avoids the use of tags <table>.

Internet Explorer 8 9, Chrome, Firefox Safari ( IE7, , 2% ).

-, - .

...

<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>

CSS

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

.

, , , .

, , , :

:

<div class="containerTwo">
     <p>here 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>

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;
}

, . COOLER, display: table-cell, , , , , : (oh IE7)

:

<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 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>

CSS:

.containerThree{
     border: 1px solid purple; /* for the example */
     /* and that 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; 
}

.

js ya, :

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

+15

, ,

line-height:200px;

+5

paragraph display table-cell, display: table; width: 100%; .

<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

, , IE7 CSS.

+3

table-cell , .

, (http://jsfiddle.net/stillb4llin/RxpFF/). , .

+3

, , padding-top, .

, , div 30px, 10px, - 10px, , , , , .

, css 30px, , 10px, 20px.

- , .

+2

, display: inline-block - :

<!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>

, display:inline-block display:table-cell display:table parent .

:

CSS

0

More articles:


All Articles