html - 为什么这不居中？它被压低了

Question

如果没有“designbox”，它会正确居中，但如果我添加“designbox”，它会被压低。我的目标是在 designbox 旁边居中标题，但到目前为止我没有运气。我尝试了每一种居中方法，但没有任何效果!

知道为什么会发生这种情况以及我应该如何解决这个问题吗？

代码: https://jsfiddle.net/bjsowaxj/8/

html:

    <div class = "content-headercontainer">
<div class = "designbox">

</div>
<div class = "title">
Hi
</div>
</div>

CSS:

    .content-headercontainer{
    position: relative;
    font-weight: 700;
    font-size: 25px;
    width: 100%;
    height: 56px;
    background: yellow;
    margin-bottom: 4px;
}
.designbox{
    position: relative;
    display: inline-block;
    height:100%;
    width: 14px;
    background: orange;
 }
.title{
  position: relative;
  line-height: 56px;
    display: inline-block;
    background: green;

}

Answer 1

给.title

vertical-align:top;

Demo