Невозможно выровнять текст рядом с изображением

Question

У меня есть следующий код, и я не могу получить текст в div header-loggedout, чтобы отображать его в центре. Если я отрегулирую высоту, вертикальные поля или прокладку div, он всегда заканчивает движение нижней границы вниз по какой-то причине. Изображение и текст просто не будут правильно выровнены. Как сохранить текст и изображение в (по крайней мере, примерно) в том же положении, но вертикально выровнять и в середине между верхними/нижними границами?

Here's a fiddle.

.header-lower { 
 
    position: relative; 
 
    display: table; 
 
    z-index: 0; 
 
    padding: 10px 0px; 
 
    width: 100%; 
 
    border-top: 1px solid #ddd; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 
.header-logo { 
 
    display: table-cell; 
 
    text-align: left; 
 
    margin: 0 0 20px; 
 
    vertical-align: inherit !important; 
 
} 
 
.header-logo a { 
 
    display: inline-block; 
 
    float: left; 
 
    max-width: 100%; 
 
    line-height: 0; 
 
} 
 
.header-loggedout { 
 
    font-size: 26px; 
 
    vertical-align: middle; 
 
}

<div class="header-lower"> 
 
    <div class="header-logo"> 
 
    <a href="#"> 
 
     <img title="" alt="alt" src="http://placehold.it/310x39" /> 
 
    </a> 
 
    </div> 
 
    <div class="header-loggedout"> 
 
    Test Text 
 
    </div> 
 
</div>

Answer 1

Вы можете установить отображение .header-loggedout в table-cell:

.header-loggedout { 
    font-size: 26px; 
    vertical-align: middle; 
    display: table-cell; 
} 

Fiddle Here

Answer 2

заменить этот класс

.header-lower { 
    border-bottom: 1px solid #ddd; 
    border-top: 1px solid #ddd; 
    display: table; 
    padding: 10px 0; 
    position: relative; 
    text-align: center; 
    vertical-align: middle; 
    width: 100%; 
    z-index: 0; 
} 

Answer 3

Вы можете использовать абсолютное позиционирование Fiddle here

.header-loggedout { 
     font-size: 26px; 
     position:absolute; 
     top:50%; 
     right: 20px; 
     transform: translateY(-50%); 
    }