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

Question

我怎样才能从中得到：

到那个：

是否有css属性才能获得此结果？我知道vertical-align但是这只适用于内联元素，当它们与更高的高度元素一起时。 有什么想法吗？

Answer 1

您可以使用margin / padding / line height

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

或

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

或

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

这篇文章可以帮助您更好地理解它：

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

Answer 2

如果内容是固定的（构成“版权”的实际单词永远不会改变），那么你应该使用Nave Tseva的解决方案。

但是，为了垂直对齐动态内容，您可以使用display:table-cell; vertical-align:middle来完成垂直居中。虽然，更多跨浏览器兼容的解决方案是将该内容实际包装在单个表格单元格中，并设置valign="middle"。

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

我知道大多数人都不喜欢使用表格来处理非删除的单一条目内容，因为这实际上并不是表格是适当元素的情况......但是再次，在一个完美的世界中，我们不会考虑到IE的羞怯。

Answer 3

如果您可以使用弹性框布局，也就是说，您不需要支持旧版浏览器，则可以使用以下内容。 CSS有点支持不同的浏览器，但它们正在融合......

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

请参阅http://jsfiddle.net/C4WTE/和flexbox playground

如果您确实需要在旧浏览器中使用此功能，我会放弃并使用relic180 suggested http://ajaxian.com/wp-content/images/giveupandusetables.png等表格