需要將列表項對齊到div的中心

我試過margin：0 auto，但沒有運氣。

注意：navigation-wrapper div需要保持原樣，這只是html關注的片段。

檢查http://jsfiddle.net/bkmorse/aaCY7/查看我需要在div中正確對齊的鏈接。

HTML

<div id="navigation-wrapper"> 
    <ul id="top-navigation"> 
    <li><a href="">Home</a></li> 
    <li><a href="">Volunteer</a></li> 
    <li><a href="">Support</a></li> 
    <li><a href="">Educate</a></li> 
    <li><a href="">Contact</a></li> 
    <li><a href="">Gift Shop</a></li> 
    <li><a href="">Directions</a></li> 
    </ul> 
</div>

CSS

#navigation-wrapper { 
width:465px; 
border:1px solid red; 
} 

#top-navigation { 
margin: 0 auto; 
border:1px solid blue; 
padding:5px 0; 
} 

#top-navigation li { 
display:inline; 
list-style-type:none; 
margin:2; 
}

來源

2012-03-26 Brad

保證金：0自動;如果你定義一個固定的寬度將會工作。 – 2012-03-26 18:50:02

將您的CSS更改爲此。這可以解決。

#navigation-wrapper { 
width:465px; 
border:1px solid red; 
margin:0 auto; 
text-align:center; 
} 

#top-navigation { 
border:1px solid blue; 
padding:5px 0; 
} 

#top-navigation li { 
display:inline; 
list-style-type:none; 
margin:2; 
}

來源

2012-03-26 18:52:03

Margin:auto與定義width .WRITE這樣的工作：

#navigation-wrapper { 
width:465px; 
margin: 0 auto; 
border:1px solid red; 
    text-align:center; 
} 

#top-navigation { 
display:inline-block; 
border:1px solid blue; 
padding:5px 0; 
}

檢查這個http://jsfiddle.net/aaCY7/1/

來源

2012-03-26 18:51:08 sandeep

inline-block給IE兼容性帶來了問題，你只能用醜陋的黑客來解決。這可以很容易地解決，而不會出現內聯塊和問題。 – 2012-03-26 18:58:54

由於您的頂級導航ul沒有設置寬度，它實際上居中。然而裏面的李不是。如果你想看到的那些項目，然後

#top-navigation { 
margin: 0 auto; 
border:1px solid blue; 
padding:5px 0; 
text-align: center; 
}

中心如果您想要的清單在div中心，但仍留下對齊內使用這種

#top-navigation { 
margin: 0 auto; 
border:1px solid blue; 
padding:5px 0; 
width: 300px; 
}

的事情或者兩者都做，如果兩者的某種組合是必要的。

來源

2012-03-26 19:00:22

我只是需要知道里面的物品爲我啓動的顯示內聯。在中心對齊的情況下，我們可以在主div中添加tex-align：center。在上述情況下 #top-navigation { margin: 0 auto; border:1px solid blue; padding:5px 0; text-align: center; } 這應該工作

來源

2013-08-13 15:29:07

需要將列表項對齊到div的中心

回答

相關問題