標識在導航中間 - 如何垂直居中

我正在嘗試創建一個標題/導航欄，其中會有導航選項位於徽標的任一側，我希望所有這些導航選項都是垂直居中的。爲了達到這個目的，我使用<li>和<li class>元素，但是我對垂直居中有一點運氣。有任何想法嗎？標識在導航中間 - 如何垂直居中

HTML

<header> 
    <nav> 
     <ul> 
      <li class="btn"><a href="#"><span>01</span>Home</a></li> 
      <li class="btn"><a href="#"><span>02</span>Vendors</a></li> 
      <li><a href="#"><img src="img/logo.png" alt="sews logo" /></a></li> 
      <li class="btn"><a href="#"><span>03</span>Tickets</a></li> 
      <li class="btn"><a href="#"><span>04</span>Blog</a></li> 
     </ul> 
    </nav> 
</header>

CSS

nav { 
    margin: 40px auto; 
    width: 600px; 
    padding-bottom: 80px; 
} 

nav ul li { 
    display: inline; 
} 

nav ul li a { 
    margin:0 10px; 
} 

nav ul li.btn a { 
    padding-top: -10px; 
} 

nav ul li a span { 
    color: #e3c22a; 

font-family: fanwood;

}

來源

2012-12-19 AMC

您可以嘗試使用margin-top：50％。 –

互聯網上最有幫助的網頁之一：http：//www.w3.org/Style/Examples/007/center.en.html – Colleen

@EL我希望這很容易;沒有運氣:( – AMC

要垂直居中放置東西，請在容器元素上應用除了vertical-align: middle之外的css規則display: table cell。

來源

2012-12-19 22:52:15 Colleen

在什麼情況下？（'vertical-align：middle'屬於.btn，還是nav整體？） – AMC

它屬於'nav'。它被應用到容器元素（請參閱我在評論中引用您的文章） – Colleen

明白了。我已經實施了您推薦的修改，但未注意到任何更改。有任何想法嗎？ http://jsfiddle.net/6smrF/ – AMC

如果鏈接和圖像在同一個元素，比如一個div，你可以設置圖像使用的樣式標籤：vertical-align：middle;

來源

2012-12-19 22:51:16 Racktash

-1

position relative標題。 position absolute圖像。 left: 50%;圖片

來源

2012-12-19 22:52:11 ashley

垂直居中，而不是水平。 – Colleen

@Colleen top：也有50％=） –

標識在導航中間 - 如何垂直居中

回答

相關問題