如何在Bootstrap的導航欄品牌類中垂直放置文本？

Question

我有一些文字的徽標。我希望文本垂直對齊中間。

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

navbar-brand在引導定義的那樣：

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

我試過在跨度文本一起包裝形象，並設置其樣式如下：

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

See JSFiddle

有人可以給我一個提示，我應該如何將文本居中的角度講？

Answer 1

使用下面的CSS：

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

使用display:flex而不是display:inline-block。

Working Fiddle

Answer 2

如果跨瀏覽器兼容是舊版本瀏覽器的顯示錶的方法可能是值得考慮的一絕。雖然真的很喜歡Ketan的答案。這將需要

一切都是圍繞文本，像這樣的附加標籤：

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