html - 如何将段落块中的文本垂直居中？

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 游乐场

如果你真的需要它在旧浏览器中工作，我会放弃并使用relic180 建议的表 http://ajaxian.com/wp-content/images/giveupandusetables.png