Почему это не центрирование? он нажимается вниз

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