如何在段落块中垂直居中文本？

Question

How can I get from that :

to that :

?

Is there a css property to get this result ? I'm aware of vertical-align But that is only for inline elements when they are altogether with more height-wide element ones. Any idea ?

Answer 1

You can use margin / padding / line height

p #copyright {margin-top: 10px;}

or

p #copyright {padding-top: 10px;}

or

p #copyright {line-height: 25px;}

Here is an article that can help you understand it better:

http://www.w3.org/TR/CSS2/box.html

Answer 2

If the content is fixed (The actual words that make up "Copyright" will never change), then you should go with Nave Tseva's solution.

For vertically aligning dynamic content though, you can use display:table-cell; vertical-align:middle display:table-cell; vertical-align:middle to accomplish the vertical centering. Although, a more cross-browser compatible solution is to actually wrap that content in a single table cell, and set valign="middle" .

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td valign="middle">
      <p>Copyright</p>
    </td>
  </tr>
</table>

I know most people would frown on using a table for non-delinated single entry content like this as that's not actually a situation where tables are the appropriate element... but then again, in a perfect world we wouldn't be taking IE shittiness into consideration either.

Answer 3

If you can use flex box layout, that is, you don't need support for older browsers, you can use something like the following. The CSS is kind of jacked to support different browsers, but they are converging...

#content {
   display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
   display: -moz-box;      /* OLD: Firefox (buggy) */ 
   display: -ms-flexbox;   /* MID: IE 10 */
   display: -webkit-flex;  /* NEW, Chrome 21+ */
   display: flex;          /* NEW: Opera 12.1, Firefox 22+ */

   -webkit-box-align: center; -moz-box-align: center; /* OLD… */
   -ms-flex-align: center; /* You know the drill now… */
   -webkit-align-items: center;
   align-items: center;

   -webkit-box-pack: center; -moz-box-pack: center; 
   -ms-flex-pack: center; 
   -webkit-justify-content: center;
   justify-content: center;

   margin: 0;
   height: 500px;
   border: 1px solid red;
}

#content p{
    border: 1px blue solid;
    box-flex:1
}

HTML

<div id="content">
    <p>Here's everything that I can think of to put into one line. Have to add more fillter to make sure it works for multiple lines too, yay-ah</p>
</div>

See http://jsfiddle.net/C4WTE/ and the flexbox playground

If you really need this to work in older browsers, I'd just give up and use tables like relic180 suggested http://ajaxian.com/wp-content/images/giveupandusetables.png