無法將頁面中的無序列表居中？

在瀏覽互聯網一段時間後，我還沒有找到一種方法來成功地在我的頁面上排列一個無序列表。無法將頁面中的無序列表居中？

下面是列表中的HTML：

<div id="buttons"> 
<ul> 
<li><a href="http://www.twitter.com/tommaxwelll"><img src="twitter.png" alt="twitter-icon" /></a></li> 
<li><a href="http://www.github.com/tommaxwell"><img src="github.png" alt="github-icon" /></a></li> 
<li><a href="http://www.instagram.com/tommaxwelll"><img src="instagram.png" alt="instagram-icon" /></a></li> 
<li><a href="http://www.facebook.com/tommaxwelll"><img src="facebook.png" alt="facebook-icon" /></a></li> 
</ul> 
</div>

而這裏的CSS的建議，其他SO帖子：

#buttons { 
float: right; 
position: relative; 
left: -50%; 
top:140px; 
text-align: left; 
} 

#buttons ul { 
list-style-type: none; 
position: relative; 
left: 50%; 
} 

#buttons li { 
float: left; 
position: relative; 
}

的浮動：留在列表中的項目是我如何保持列表橫向。您還可以在問題查看網站在這裏：http://www.tommaxwell.me

來源

2013-01-07 Tom Maxwell

我看不出有什麼問題... 怎麼了？請提供關於瀏覽器和系統的信息。我使用鉻和按鈕很好地集中在文本下;）順便說一句。你究竟想達到什麼目的？我不知道你想要什麼 – Vogel612

有什麼問題？ Coz on site我得到正確的中心對齊列表 – codeomnitrix

你的意思是你希望周圍的容器'＃按鈕'集中在頁面內嗎？ – Ohgodwhy

檢查以下http://jsfiddle.net/QGgdR/

#sitecontent { 
position: relative; 
display: block; 
margin: 140px auto 20px; 
width: 100%; 
max-width: 650px; 
margin: 140px auto 0; 
padding: 0 17px 4px 17px; 
background-color: rgba(255, 255, 255, 0.7); 
border: 1px solid rgba(191, 191, 191, 1); 
} 
#buttons { 
margin: 20px auto 0; 
display: block; 
height: 50px; 
} 

#buttons ul { 
margin: 0 auto; 
padding: 0; 
display: table; 
list-style: none; 
} 

#buttons li { 
float: left; 
}

來源

2013-01-07 06:36:07 JV10

先生，您是天才。 –

不客氣@TomMaxwell – JV10

我可以問一下顯示器：表嗎？從未使用它。 –

改變你的CSS這樣

#buttons { 
display: inline; 
position: relative; 
right: 37px; //change this to exactly center your ul 
text-align: left; 
top: 140px; 
} 

#buttons ul { 
display: inline-block; 
list-style-type: none; 
position: relative; 
}

和你的HTML

<center><div id="buttons"> 
<ul> 
<li><a href="http://www.twitter.com/tommaxwelll"><img src="twitter.png" alt="twitter-icon" /></a></li> 
<li><a href="http://www.github.com/tommaxwell"><img src="github.png" alt="github-icon" /></a></li> 
<li><a href="http://www.instagram.com/tommaxwelll"><img src="instagram.png" alt="instagram-icon" /></a></li> 
<li><a href="http://www.facebook.com/tommaxwelll"><img src="facebook.png" alt="facebook-icon" /></a></li> 
</ul> 
</div></center>

來源

2013-01-07 06:35:07 Dineshkani

爲中心一個浮動列表試試這個。看起來有點怪異，但工作原理：

#buttons { 
    top:140px; /* your specific code */ 
    float: left; 
    width: 100%; 
    overflow: hidden; 
    position: relative; 
} 

#buttons ul { 
    clear: left; 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    left: 50%; 
    text-align: center; 
} 

#buttons ul li { 
    display: block; 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    right: 50%; 
}

來源

2013-01-07 06:38:13

工程，但其他人先解決它。抱歉! –

沒問題，顯示器：表格在ie7中不起作用，但這個會。 –

你應該試試這樣：

無需使用position:relative;和position:absolute;

#buttons{ 
    display:table; 
    margin:0 auto; 
}

JsBin Link

來源

2013-01-07 06:44:15

@你可以使用我的解決方案。希望它對你有好處。 –

無法將頁面中的無序列表居中？

回答

相關問題