Question

我正在尝试在DIV中垂直对齐文字。我尝试使用CSS line-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%;
}

任何人都可以告诉我如何将这些文字设置为垂直居中？

谢谢。

Answer 1

您可以尝试使用vertical-align。

关键是它仅适用于display设置为inline，inline-block或table-cell的元素。此外，这些元素的父元素的display属性也必须设置为这3个值中的一个。

它不是垂直对齐元素本身，而是它相对于父元素的内容。

** Example* *，尝试使用vertical-align元素的span。

并尝试更改display和div元素的span属性。

我建议阅读w3c规范或 Mozilla Developer Network article 了解更多信息

Answer 2

将您的css更改为：

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

h2默认样式。

h2{ font-size: 1.5em; margin: .75em 0 }

Default style sheet

无需使用行高：）

fiddle

Answer 3

H4元素未按您的意愿对齐。添加margin: auto即可解决您的问题。

h4{
    margin: auto;
}

Fiddle

垂直对齐文本

3 个答案: