如何將文本垂直居中放在一個段落中？

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