リストのコンテンツのセンタリング

Question

リストのコンテンツがコンテナの中央に表示されないのはなぜですか？私はのテキスト - ライン：を#navのdivに入れましたが、のリストスタイルタイプでは表示されませんでしたが、まだ弾丸を考慮しているようです。。スクリーンショットを添付しました。

<div id="nav"> 
    <h2>Sonnet Index</h2> 
    <ul> 
     <li><a href="#">Book #1</a></li> 
     <li><a href="#">Book #2</a></li> 
     <li><a href="#">Book #3</a></li> 
     <li><a href="#">Book #4</a></li> 
     <li><a href="#">Book #5</a></li> 
    </ul> 
</div> 

CSS：

がここにHTMLだul bydefault

#nav { 
    background-color: #ACCCFF; 
    float: left; 
    width: 200px; 
    height: 410px; 
    text-align: center; 
} 

ul { 
    list-style-type: none; 
} 

Answer 1

は左から60px paddingを取る、あなたはこれを行うためにpadding-left:0を設定することができます。

ul { 
    padding-left: 0px; 
} 

Answer 2

あなたのコードの要素を検査した後、左パディングが故にそれが右方向にシフトし、0PXするように設定されていなかった、あなたがしなければならなかったすべては、パディング左追加しました：0PXを。ここ はfiddleとコードだけでなく

#nav { 
 
    background-color: #ACCCFF; 
 
    float: left; 
 
    width: 200px; 
 
    height: 410px; 
 
    text-align: center; 
 
} 
 

 
ul { 
 
    padding-left: 0px; 
 
    list-style-type: none; 
 
}

<div id="nav"> 
 
    <h2>Sonnet Index</h2> 
 
    <ul> 
 
     <li><a href="#">Book #1</a></li> 
 
     <li><a href="#">Book #2</a></li> 
 
     <li><a href="#">Book #3</a></li> 
 
     <li><a href="#">Book #4</a></li> 
 
     <li><a href="#">Book #5</a></li> 
 
    </ul> 
 
</div>

Answer 3

番号なしリストは、あなたのブラウザーで検査ツールでそれを確認することができ、デフォルトでいくつかのパディングを持っています。ちょうど私のリストの内容は完全にそのコンテナの中央にされていないのはなぜCSSが..

ul { 
    list-style-type: none; 
    padding-left:0px; 
} 

Answer 4

のようになります.Yourそのパディングを削除しますか？あなたはnot changed default properties of ul tagを持っており、彼らはできるだけ早くあなたはそれがあなたのpadding:0#nav text-align:centerが正常に動作し、中央にそれらを合わせるのです変更すると、以下のように

ul { 
display: block; 
list-style-type: disc; 
margin-top: 1em; 
margin-bottom: 1 em; 
margin-left: 0; 
margin-right: 0; 
padding-left: 40px; 
} 

あるのでまあ、それはです。この作品smontoro14希望@

#nav { 
 
    background-color: #ACCCFF; 
 
    float: left; 
 
    width: 200px; 
 
    height: 410px; 
 
    text-align: center; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    padding:0px; /*Add this*/ 
 
}

<div id="nav"> 
 
    <h2>Sonnet Index</h2> 
 
    <ul> 
 
     <li><a href="#">Book #1</a></li> 
 
     <li><a href="#">Book #2</a></li> 
 
     <li><a href="#">Book #3</a></li> 
 
     <li><a href="#">Book #4</a></li> 
 
     <li><a href="#">Book #5</a></li> 
 
    </ul> 
 
</div>