为什么这不是中心？它被推倒了

Question

如果没有＆＃34; designbox＆＃34;它会正确居中。但如果我添加＆＃34; designbox＆＃34;它会被推倒。我的目标是将标题置于设计框旁边，但到目前为止我没有运气。我尝试了每一种中心方法，没有任何作用！

任何想法为什么会发生这种情况，我该如何解决这个问题？

代码： 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