リストタグの中央寄せ
リストでメニューを横に作成したものの…リスト自体を中央寄せにしたい!
そんなときはこれです。
<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>
※margin、height、withはデザインによって変えてください。
<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: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;
}