行高不能正常工作

Question

我想用我的徽標垂直居中文本。當我使用線條高度時，它也會提升我的標誌。我怎樣才能提高文字，使其與我的徽標垂直居中？這是我的代碼。

HTML

<div id="wrapper"> 
    <div id="header"> 
     <div id="nav"> 
     <ul> 
      <li> dfgkdfjg </li> 
      <li><img src="http://i.imgur.com/d0umnxt.png" /></li> 
      <li> pfopkp </li> 
     </ul> 
     </div> 
    </div> 
</div> 

CSS

body { 
    margin: 0px; 
} 

#header { 
    display: table; 
    width: 100%; 
    height: 100px; 
    background-color: #151B1F; 
} 
#nav { 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
} 

#nav li { 
    margin-left: 50px; 
    margin-right: 50px; 
    display:inline; 
} 

Answer 1

其實你試圖調整文本，這會爲你造成問題;而不是對齊文本試圖對齊圖像...

在你的CSS

#nav img { 
    vertical-align: middle; 
} 

這裏是工作示例Link添加這一點。

Answer 2

嘗試垂直對齊圖像而不是文字：

#nav img { 
    vertical-align: middle; 
} 

這將做的工作。