如果没有＆＃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;
}