中心圖像（垂直）在導航列表

Question

我想創建一個導航列表響應，並已在列表裏面在頁面中央

我設法得到接近然而，在圖像上的圖像比名單更高。

我試圖讓它像這樣，但似乎無法弄清楚。 任何幫助，將不勝感激！

CODE：https://jsfiddle.net/z50zgpLg/

HTML：

<div class="container-fluid"> 
      <header> 
       <ul class="nav"> 
        <li>Home</li> 
        <li>Portfolio</li> 
        <li id="logo"> 
         <img src="images/sonis.png"/> 
        </li> 
        </li> 
        <li>About</li> 
        <li>Contact</li> 
       </ul> 
      </header> 
     </div> 

CSS：

* { 
       margin:0px; 
       padding:0px; 
      } 
      .container-fluid { 
       border: 1px solid red; 
       width: 100%; 
      } 

      .nav { 
       border: 1px solid black; 
       width: 60%; 
       margin:0 auto; 
       text-align: center; 
      } 

      .nav li { 
       display: inline-block; 
       border: 1px solid red; 
      } 

      #logo { 
       height: auto; 
       width: 100px; 
      } 

      #logo img { 
       width: 100px; 
       height: auto; 
      } 

Answer 1

您可以使用vertical-align:middle

CSS

.nav li { 
    display: inline-block; 
    border: 1px solid red; 
    vertical-align: middle; 
} 

DEMO HERE

Answer 2

添加vertical-align:middle到li CSS。內嵌塊項目的缺省值爲baseline，您必須更改該項目。

.nav li { 
    display: inline-block; 
    border: 1px solid red; 
    vertical-align: middle; 
} 

Answer 3

我這裏有一個工作小提琴模仿你在找什麼。 https://jsfiddle.net/41hgusjr/

我簡單地將padding-bottom: 5px;和padding-top:5px;添加到logo和img。

當然，這使得導航大得多。