ulを中央揃えにする方法

centering


ulで作成したリストを中央揃え(センタリング)したい時がよくあります。

たとえば、ナビゲーションメニューとか。ページナビゲーションとか。

幅を固定にすれば、margin:0 auto; を使えるけど、固定にはしたくない!という状況がほとんど・・。

解決方法をメモしておこうと思います。

 

前提条件として、liの横揃えを、float:leftではなくdisplay:inline-blockで行います。

こうすることで、text-align:centerが使えるようになります!

まずは、センタリングされていない状態です。

  • HOME
  • ABOUT
  • GALLERY
  • CONTACT

[html]
<div class="list-left">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>CONTACT</li>
</ul>
</div>
[/html]
[css]
.list-left {
background:#16A6B6;
overflow:hidden;
}
.list-left ul {
margin:5px;
padding:0;
}
.list-left ul li {
list-style-type: none;
display: inline-block;
margin:0;
padding:5px;
background:#242424;
color:#fff;
}
[/css]
 

でも、text-align:center をつけるだけで…

  • HOME
  • ABOUT
  • GALLERY
  • CONTACT

[html]
<div class="list-center">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>CONTACT</li>
</ul>
</div>
[/html]
[css]
.list-center {
background:#16A6B6;
overflow:hidden;
}
.list-center ul {
margin:5px;
padding:0;
text-align:center;
}
.list-center ul li {
list-style-type: none;
display: inline-block;
margin:0;
padding:5px;
background:#242424;
color:#fff;
}
[/css]
簡単そうで意外とはまってしまう部分ですよね…