Question

在浏览互联网一段时间之后，我还没有找到一种方法来成功地将无序列表集中在我的页面上。

以下是列表的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

Answer 1

检查以下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;
}

Answer 2

像这样改变你的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>

Answer 3

要将浮动列表居中，请尝试此操作。看起来有点奇怪，但有效：

#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%;
}

Answer 4

您应该尝试这样：

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

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

<强> JsBin Link

无法在页面中心无序列表？

4 个答案: