文本行高不适用于 inline-block div 容器

Question

这里是jsfiddle。 HTML：

<div class="main">
    <div class="div1"></div>
    Center with Red!
</div>

CSS：

.main{
    height: 50px;
    width: 100%;
    background-color: #000000;
    text-align: center;
    color: #ffffff;
    line-height: 50px;
    font-size: 24px;
}

.div1{
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #ff0000;
}

红色的 div 和文本居中。但是为什么行高不起作用。文本未垂直居中。我认为原因可能是 line-height 在线性布局中不起作用，但父 div 是块布局。如何垂直和水平居中红色 div 和文本。文本可能会更改，所以我不想将它们设置为绝对位置并使用如下代码：

margin-left: -25px;
margin-top: -25px;
left: 50%;
top: 50%; 

感谢您的帮助！

Answer 1

您可以简单地将vertical-align: top 添加到.div1：

.main {
  height: 50px;
  width: 100%;
  background-color: #000000;
  text-align: center;
  color: #ffffff;
  line-height: 50px;
  font-size: 24px;
}
.div1 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #ff0000;
  vertical-align: top;
}

<div class="main">
  <div class="div1"></div>
  Center with Red!
</div>

@chead24 评论后编辑。