Topテクニックメモスタイルシートネタ > リストタグの中央寄せ

リストタグの中央寄せ

リストでメニューを横に作成したものの…リスト自体を中央寄せにしたい!
そんなときはこれです。


<div id="menu">
<ul>
<li><span><a href="a.html">あ</a></span></li>
<li><span><a href="a.html">い</a></span></li>
<li><span><a href="a.html">う</a></span></li>
<li><span><a href="a.html">え</a></span></li>
<li><span><a href="a.html">お</a></span></li>
<li><span><a href="a.html">か</a></span></li>
<li><span><a href="a.html">き</a></span></li>
<li><span><a href="a.html">く</a></span></li>
</ul>
</div>


#menu ul{
margin:3px auto 5px auto;
padding:0;
width:760px;
height:65px;
list-style-type:none;
text-align:center;
}
#menu li{
float:left;
padding:0;
}
#menu a{
display:block;
width:95px;
height:20px;
text-align:center;
}

※margin、height、withはデザインによって変えてください。

「リストタグの中央寄せ」関連本

Akasa Rira
みつけたきせき