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