Как центрировать текст по вертикали в классе навигационной марки Bootstrap?

Question

У меня есть логотип с текстом. Я хочу, чтобы текст был вертикально выровнен к середине.

<a class="navbar-brand" href="foo"><img src="bar"/>FooBar</a> 

navbar-brand определяется в Bootstrap так:

.navbar-brand { 
    float: left; 
    height: 50px; 
    padding: 15px 15px; 
    font-size: 18px; 
    line-height: 20px; 
} 

Я попытался обертывание изображение вместе с текстом в пролете и установите его стиль следующим образом:

vertical-align: middle; 
display: inline-block; 

See JSFiddle

Не мог бы кто-нибудь дать мне подсказку, как мне сосредоточить текст ver тически?

Answer 1

Используйте следующие CSS:

#foo { 
    align-items: center; 
    display: flex; 
} 

Использование display:flex вместо display:inline-block.

Working Fiddle

Answer 2

Если совместимость кросс-браузер является обязательным для старых браузеров таблица подход дисплея может быть стоит посмотреть. На самом деле нравится ответ от Кетана.

Все, что потребуется дополнительный тег вокруг текста, как так:

HTML:

<span id="foo"> 
     <img src="http://radiofair.eu/downloads/images/foobar.png"/>  
    <span>FooBar</span> 
</span> 

CSS:

#foo{ 
    display: table; 
    color: red; 
} 

#foo span{ 
    display:table-cell; 
    vertical-align:middle; 
} 

Working Example