垂直对齐文本

-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默认样式。