Text line-height won't work with inline-block div container

Question

Here is the jsfiddle. HTML:

    

    Center with Red!

CSS:

Answer 1

You can simple add vertical-align: top to .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>

Edit after @chead24 comment.