在div中垂直對齊li項目

我有內聯顯示的列表項目。我想在綠色div內垂直對齊它們。在div中垂直對齊li項目

<div id="topMenu" class="topMenu"> 
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Documents</a></li> 
    <li><a href="#">Articles</a></li> 
    <li><a href="#">Info</a></li> 
    </ul> 
</div> 

.topMenu li 
{ 
    display: inline; 
    list-style-type: none; 
    padding-right: 20px; 
} 

.topMenu a 
{ 
    color: White; 
    font-weight: bold; 
    text-decoration: none; 

} 
.topMenu 
{ 
    background-position: center; 
    background-color: Green; 

    height: 30px; 
    font-family: arial, Helvetica, sans-serif; 
    font-size: 0.8em; 
    vertical-align: middle; 
    text-align:center; 

}

在線demo

來源

2010-07-24 ilann

你可以添加line-height:30px;您li元素（一樣的菜單欄的高度）

Demo

來源

2010-07-24 20:35:11

您可以只是你<li>元素位的顯示，這樣的：

.topMenu li 
{ 
    display: inline-block; 
    list-style-type: none; 
    padding: 6px 10px; 
}

Check out an updated demo here

或者，你可以填充添加到<ul>用新規則：

.topMenu ul { 
    padding-top: 6px; 
}

Check out that version here

在您可能想要刪除從.topMenu的height，讓頂部/底部填充確定它無論是哪種情況，因此，當與舊的瀏覽器縮放網頁尺度它仍然看起來「正確的」。

來源

2010-07-24 20:20:00

有沒有硬編碼填充一個更普遍的方式是什麼？ – ilann 2010-07-24 20:26:05

我想我需要高度，因爲我會在該div中使用背景圖像，所以我需要特定的高度。 – ilann 2010-07-24 20:43:08

如果您想要嚴格xhtml並刪除vertical-align，則必須使用填充屬性。

此外，嘗試垂直排列某些內容是沒有意義的，即內聯顯示。

只要考慮：填充是元素和boxmodel邊框之間的內部空間。

來源

2010-07-24 20:24:20 ChrisBenyamin

你是什麼意思沒有意義？我希望項目出現在div的中心。 – ilann 2010-07-24 20:32:05

的Internet Explorer不支持inline-block的，直到版本8

你可以嘗試變通here。

來源

2010-07-24 20:27:46 DOK

display：inline; IE 7不支持？ – ilann 2010-07-24 20:34:04

@ilann我相信IE7支持內聯而不是內聯塊。這裏有一個來源http://www.quirksmode.org/css/display.html。和另一個http://www.webdeveloper.com/forum/showthread.php?t=192848 – DOK 2010-07-24 20:38:21

，但我沒有使用內聯塊... – ilann 2010-07-24 20:48:18

在div中垂直對齊li項目

回答

相關問題