如何将文本垂直居中放在一个段落中？

Question

我怎样才能从获得：

到：

？

有没有一个CSS属性来获得这个结果？我知道垂直对齐但是，这只适用于内联元素，当它们完全具有更多高度单元元素时。 有什么想法？

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> 

我知道大多数人会使用一个表非delinated单个条目的内容类似这样的皱眉为这实际上是不是哪里表是适当的元素的情况......但话又说回来，在一个完美的世界里，我们也不会考虑到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 suggestedhttp://ajaxian.com/wp-content/images/giveupandusetables.png