文本行高不适用于内联块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和文本居中.但为什么行高不起作用.文本不是垂直居中的.我认为原因可能是线条高度在线性布局中不起作用,但父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评论后编辑.