CSS垂直對齊LI的中間

我有以下HTML，我需要LI元素垂直顯示在21像素高UL區域的中間。這是我的HTML ...CSS垂直對齊LI的中間

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     .MenuBar 
     { 
      padding: 0px; 
      border: 1px solid #036; 
      height: 21px; 
      font-size: 8pt; 
     } 
     .MenuBar li 
     { 
      display: inline; 
      padding-left: 20px; 
     } 
    </style> 
</head> 
<body> 
    <ul class="MenuBar"> 
     <li>Link 1</li><li>Link 2</li><li>Link 3</li></ul> 
</body> 
</html>

如何改變上述HTML來實現這種效果？

來源

2010-03-04 John Livermore

我假設你正在嘗試製作一個水平列表而不是垂直列表，因爲你將LI元素顯示類型設置爲「內聯」。所以，試試這個：

<style type="text/css"> 
    .MenuBar 
    { 
     padding: 0px; 
     border: 1px solid #036; 
     height: 21px; 
     font-size: 8pt; 
    } 
    .MenuBar li 
    { 
     display: inline; 
     line-height: 21px; 
     padding-left: 20px; 
    } 
</style>

來源

2010-03-04 16:39:57 Robusto

感謝大家的快速解答！ – 2010-03-04 16:57:58

無法獲取你想要什麼，但如果你想使垂直列表顯示，試試這個：

.MenuBar li 
    { 
     display: block; 
     padding-left: 20px; 
    }

display財產只是改變block而不是inline。這也是默認行爲。

來源

2010-03-04 16:36:27 Sarfraz

這是你在追求什麼？

.MenuBar li 
    { 
     display: inline; 
     padding-left: 20px; 
     line-height: 21px; 
    }

和Sarfraz一樣，我不確定我完全理解了這個問題。

來源

2010-03-04 16:39:44 Sniffer

添加line-height:21px到.MenuBar

來源

2010-03-04 16:41:16 Emily

這樣做是一個助理內聯元素插入<li />元素作爲第一個孩子，其高度應設置爲最優雅的和可靠的方法100％（父母的身高，<li />），其垂直對齊設置爲中等。爲了達到這個目的，你可以放一個<span />，但最方便的方法是使用li：在僞類之後。

.MenuBar li:before 
{ 
    display: inline; 
    height: 100%; 
    vertical-align: middle; 
    content: ''; 
}

以這種方式，你不需要硬編碼一個高度值（21px或某物）。參考： CSS vertical alignment text inside li

來源

2014-09-30 13:41:25

CSS垂直對齊LI的中間

回答

相關問題