0

text-align center相対位置と 100% の幅で からまですべてを試したように感じますmargin:0 autoが、うまくいきませんでした。UL を div の中央に配置しようとしています...

これが私のコードです

<style type="text/css">

.header {
  height: 40px;
  background: #000;
  width: 100%;
}

.header ul {
  list-style-type: none;
}

.header li {
  float: left;
  line-height: 40px;
}

.header li a {
  color: #FFF;
  padding: 0 18px;
  height: 40px;
}

</style>

<div class="header">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Rates</a></li>
    <li><a href="#">Reviews</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
4

2 に答える 2

11

これは、設定幅を定義しなくても機能します。

ul {
    display: table;
    margin: 0 auto;
}

左側のパディングを取り除き、リストを真に中央揃えにしたい場合は、次を追加します。

padding-left: 0;
于 2014-06-25T15:19:57.943 に答える
4

これで問題が解決するはずです。

ul {
    display: inline-block;
    margin: 0 auto;
}

それがうまくいかない場合は、ULに幅を設定します。

ul {
    width: 300px;
    margin: 0 auto;
}
于 2013-02-18T19:35:56.563 に答える