为什么不居中？ 它被推下

Question

It would center properly without "designbox" but it WOULD BE PUSHED DOWN if I added "designbox". My goal is to center title beside designbox, but so far I got no luck. I tried every single centering method and nothing works!

Any ideas why is this happening and how should I fix this?

code: 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

Give .title

vertical-align:top;

Demo