CSSレイアウト 中央揃えにしたい

Question

基本的なことで申し訳ありません。
webサイトを作ろうと思いレイアウトを組み始めたのですが、いきなり行き詰まってしまいました。

ナビゲーションのリストを作って、float: left;
で横並びにしたのですが、全体（<ul>）を画面中央揃えにしたいです。
左右に空白ができてもかまいません。

現在、右側に空白ができてしまっていて、いろんな所に text-align: center; 入れてみたりしたのですが変わりません。

同解決すればよいのでしょうか？

HTML

  <div id="header">
    <h1>☆ Welcome to MyRoom ☆</h1>
  </div>
  <div id="navigation">
    <ul>
      <li><a href="#">TOP</a></li>
      <li><a href="#">PHOTOS</a></li>
      <li><a href="#">LINK</a></li>
      <li><a href="#">ME</a></li>
    </ul>
  </div>
  <div id="content">
  </div>

CSS

body {
width:980px;
margin:0 auto;
}
/* ----- ヘッダー ----- */
#header {
height:150px;
background-color:#009b9f;
}

/* ----- メニュー ----- */
#navigation {
height:40px;
background-color:#009b9f;
margin-top:10px;
}

#navigation ul{
  text-align: center;
  overflow: hidden;
}

#navigation li {
  list-style-type: none;
  line-height: 40px;
  float: left;
  width: 210px;
  border-right: #fff 1px solid;
}

Answer 1

paddingとwidthでの調節はすでに回答がついていたので、ちょっと違ったやり方で。

CSS3のflexboxを使うと以下の様に書くこともできます。

#navigation ul{
  text-align: center;
  overflow: hidden;
  padding:0;           /* 追加 */
  display: flex;       /* 追加 */
}

#navigation li {
  flex:1;               /* 追加 */
  list-style-type: none;
  line-height: 40px;
  /* 削除 float: left; */
  /* 削除 width: 210px; */
  border-right: #fff 1px solid;
}

最近のブラウザなら大体問題ないですが、古いブラウザだと崩れる場合もありますのでその点はご注意を。

Comments

[yumi0414]

ありがとうございます！いろいろなやり方があるのですね。
flexboxは使ったことが無かったのですが、便利そうです。
勉強してみます。

Answer 2

ナビゲーションの横にある空白を無くして、TOP,PHOTOS,LINK,MEの４つのリスト項目を中央に並べるという認識でよろしいでしょうか？

/* ----- メニュー ----- */
#navigation ul{
  text-align: center;
  padding: 0;
}

#navigation li {
  list-style-type: none;
  line-height: 40px;
  float: left;
  width: 245px;
  box-sizing: border-box;
  border-right: #fff 1px solid;
}

#navigation li:last-child {
  border: none;
}

cssの記述を変更しました。
ul要素には、最初からpaddingが設定されているので、paddingを0にしています。
これで、bodyの横幅分980pxまでul要素が広がります。
後は、980 / 4 = 245pxとなるのですが、ボーダーを設定しているので、
box-sizingプロパティを指定しています。box-sizing: border-box;でボーダーの1pxを含めた横幅分となっています。
li要素の一番最後には、ボーダーを設定したくない(1px分が余分)ので、li:last-childでボーダーを削除しています。

このような形はいかがですか？

Comments

[yumi0414]

きれいにレイアウトできました！
ありがとうございます！
「ul要素には、最初からpaddingが設定されている」のですね！
そう考えたことなかったので勉強になりました。

[straysheep]

HTMLの要素には、最初からpadding,marginが設定されているものがあります。
(ブラウザ毎に異なるので、デベロッパーツールなどで確認するのがいいと思います。）
もし、そういった要素を消して一から自分で設定したいといったことであれば、
reset.cssやnormalize.cssを使うことも検討してみてください。
ただ、HTMLの制作を始めたばかりでしたら最初は使わずに要素がもともと持っているプロパティなどを調べる方が役に立つと思います。