垂直對齊文本

-2

我想在DIV中垂直對齊文本。我試了CSSline-height屬性，但沒有運氣。垂直對齊文本

這是我的HTML -

<div class="vertical"> 
    <h4>Content one</h4> 
    </div> 

    <br><br><br><br> 

    <div class="vertical"> 
    <h4>This is Content Tow</h4> 
    </div

我的CSS -

.vertical { 
    background: #8C3A0A; 
    border-radius: 6px; 
    color: #FFFFFF; 
    float: left; 
    height: 48px; 
    line-height: 50px; 
    margin-right: 10px; 
    padding: 5px; 
    text-align: center; 
    width: 25%; 
}

任何機構可以告訴我怎麼設置這些文字垂直居中？

謝謝。

來源

2014-06-06 TNK

您可以嘗試使用vertical-align。

關鍵是它僅適用於display設置爲inline,inline-block或的元素。而且，這些元素的父元素的屬性也必須設置爲這三個值中的一個。

它並不垂直對齊元素本身，但它是相對於父項的內容。

** Example* *，請嘗試玩span元素的vertical-align。

並且還嘗試更改div和span元素的display屬性。

我建議閱讀W3C規範或Mozilla Developer Network article更多的信息，你的答案

來源

2014-06-06 15:13:36 knitevision

這個例子的瀏覽器兼容性如何？ – TNK

它在MDN網站提供。 IE4 +，Chrome 1+，Firefox 1.7+，Safari 1+，Opera 4+ – knitevision

更改css這樣：

.vertical { 
    background: #8C3A0A; 
    border-radius: 6px; 
    color: #FFFFFF; 
    float: left; 
    margin-right: 10px; 
    text-align: center; 
    width: 25%; 
}

H2默認樣式。