CSSでDivの水平方向のリストを中央揃えにする方法

コンテンツ

• 説明書

Webページを作成するときは、クリック可能なメニューなどの横方向のリストを中央揃えにするためにCSSを使用すると便利です。 HTMLの横にあるスタイルシート言語のCSSを使用して、ページの外観を制御できます。 CSSスタイルは、さまざまなWebブラウザで予想外に表示されることが多いため、投稿する前にページを徹底的にテストすることが重要です。番号なしリスト（ul）はブロックレベルの要素なので、widthプロパティを使用して集中効果を作成できます。

説明書

あなたはあなたのWebページの外観を制御するためにCSSとHTMLを使うことができます （Comstock / Stockbyte / Getty Images）

1. Windowsのメモ帳などのテキストエディタでHTMLファイルを開きます。

2. 次のコードを追加して、HTMLファイルの ""セクションにある水平方向のリストに必要なCSSスタイルを追加します。

   type = "text / css"> .myclass {text-align：center; myclass ul {width：275px;}マージン：0ピクセル自動} .myclass li {表示：ブロック;フロート：左。高さ：50ピクセル。行の高さ：50ピクセル。マージン：5px。幅：125ピクセル。ボーダー：1px黒の実線。 }

   リストの幅（ul）は、水平方向の項目の幅とマージン（li）の合計を表します。

3. 次のコードを追加して、HTMLファイルの ">"セクションに水平方向のリストを作成します。

   • 最初の項目
   • divの2番目の項目

   "ul"タグは、番号なしリストを指定します。 "li"タグはリスト内の項目に対応します。リストアイテムは、上で定義されたものと一致するCSSスタイルを使用します。

4. HTMLファイルを保存してWebサーバーにロードすると、水平方向の中央揃えリストが表示されます。