0

しばらくインターネットをブラウジングした後、順序付けられていないリストを自分のページの中央に配置する方法をまだ見つけていません。

リストの 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>

他の SO 投稿で推奨されている CSS は次のとおりです。

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

リスト項目の float:left は、リストを水平に保つ方法です。問題のサイトはこちらからもご覧いただけます: http://www.tommaxwell.me

4

4 に答える 4

2

次の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-07T06:36:07.300 に答える
0

次のようにしてみてください。

使用する必要はありませposition:relative;position:absolute;

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

JsBinリンク

于 2013-01-07T06:44:15.040 に答える
0

このように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-07T06:35:07.460 に答える
0

フローティングリストを中央に配置するには、これを試してください。少し奇妙に見えますが、機能します:

#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-07T06:38:13.440 に答える