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的中间

回答

相关问题