如何在沒有這些多重CSS衝突的情況下在ul導航欄中垂直居中文本？

我做了一個功能CSS導航欄，除了一些fugg CSS副作用 -

我想垂直居中每個列表塊中的文本，而vertical-align: middle不起作用。相反，我使用的是padding-top: 13px，但是這會呈現填充區域，其中沒有列表元素的其餘部分，並且display: inline block樣式的鏈接確實會將而不是擴展到填充區域！（a:hover僅影響填充以下的區域）

那麼，如何在沒有這些CSS問題的情況下將列表元素中的文本垂直居中？

下面是相關的CSS：

如何在沒有這些多重CSS衝突的情況下在ul導航欄中垂直居中文本？

/* header section */ 
#header 
{ 
    padding-left: 115px; 
    margin-bottom: 10px; 
} 
    #main-menu 
    { 
     list-style-type: none; 
    } 
    #main-menu li 
    { 
     border: 1px solid black; 
     text-align: center; 
     padding-top: 13px; 

     color: #666; 
     font-family: "Lucida Console"; 
     font-variant: small-caps; 
     letter-spacing: 2px; 

     /* for block layout */ 
      display: -moz-inline-box; /* for firefox */ 
      display: inline-block; 

     width: 153px; 
     height: 32px; 
    } 
    #main-menu a:link, a:visited 
    { 
     display: -moz-inline-box; /* for firefox */ 
     display: inline-block; 

     width: 100%; 
     height: 100%; 
     background-color: #eee; 
    } 
    #main-menu a:hover, a:active 
    { 
     background-color: #bbb; 
    }<br /><br />

...這裏是相關的HTML：

 <!-- header section --> 
     <div id = "header"> 
      <ul id = "main-menu"> 
       <!-- no spaces between list elements when all on the same line! --> 
       <li><a href = "home.html" title = "home">home</a></li><li><a href = "about.html" title = "about">about</a></li><li><a href = "cart.html" title = "shopping cart">cart</a></li><li><a href = "login.html" title = "log in">login</a></li><li><a href = "createAccount.html" title = "create a new account">sign up</a></li> 
      </ul> 

     </div> <!-- end of header section -->

來源

2012-04-08 Ian Campbell

的事情，我改變了：

改變了鏈接顯示爲塊元素。
刪除li元素頂部的填充。
將填充高度添加到li元素的高度。
將行高設置爲li元素的高度。
某些格式

http://jsfiddle.net/gtr053/7yrX7/

來源

2012-04-08 19:34:41

啊！我嘗試過'margin-top'，但是因爲保證金會影響外部（而不是內部），所以不起作用。擺脫填充，並添加'行高'是解決方案，謝謝你。沒有考慮過「高度」和「線高」，你能詳細說明一下嗎？ – 2012-04-08 21:31:00

是的，基本上你可以根據需要設置元素的高度，然後將行高設置爲任何高度。這隻適用於一行文本，但（這有例外，這超出了您的需求範圍）。 – 2012-04-09 05:35:09

嘗試設置行高度

line-height: 13px;

來源

2012-04-08 19:34:52 Connor

我不知道多少什麼，但我剛纔已經用這個和它的作品

進入一般造型的快速CSS

li { 
    display:inline; 
    padding: 0px 50px; 
}

第一個px將菜單項放下，第二個px將它們分開。

來源

2016-01-17 12:15:06 Jeremy

如何在沒有這些多重CSS衝突的情況下在ul導航欄中垂直居中文本？

回答

相關問題