ホームページ > 記事 > ウェブフロントエンド > CSS は、Elements_html/css_WEB-ITnose の水平方向の中央揃えを実装します。
CSS は、Elements_html/css_WEB-ITnose の水平方向の中央揃えを実装します。
- WBOYオリジナル
- 2016-06-24 11:38:28966ブラウズ
CSS は要素の水平方向のセンタリングを実装します
要素は主にブロックレベルの要素とインライン要素に分けられるため、要素の水平方向のセンタリングはこれら 2 つの状況でも議論できます。また、ブロックレベルの要素の実装はより複雑であり、別途議論される。
1. インライン要素
一般的に使用されるインライン要素は、a/img/input/span などです。タグ内の HTML テキストもこのカテゴリに分類されます。このような場合、親要素に text-align:center を設定することで水平方向の中央揃えが実現されます。
HTML 構造:
<body> <div class="txtCenter"> Hello World!!! </div></body>
CSS スタイル:
<style> div.txtCenter{ text-align:center; }</style> 2. ブロックレベルの要素
よく使用されるブロックレベルの要素は、div/table/ul/dl/form/h1/p などです。さまざまなアプリケーション シナリオに応じて、固定幅ブロック レベルと可変幅ブロック レベルの 2 つの状況に分けられます。これらについては個別に説明します。
1. 固定幅のブロックレベル要素
**固定幅**と**ブロック型**の2つの条件を満たす要素は、**「左右のマージン」値を設定することで中央揃えにすることができます。の「自動」**に。
HTML 構造:
<body> <div> Hello World!!! </div></body>
CSS スタイル:
<style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:500px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ }</style> 2. 可変幅のブロックレベル要素
ページネーションの数が可変であるため、可変幅のブロックレベル要素がよく使用されます。 、幅制限はライブでは使用できません。この時点で、要素を水平方向に中央揃えにする主な方法は 3 つあります:
- table タグを追加する
- 表示を設定する
- 位置を相対および左に設定する
ステップ 1: 設定する必要がある中央の要素の外側に table タグ (92cee25da80fac49f6fb6eec5fd2c22a、a34de1251f0d9fe1e645927f19a896e8、b6c5a531a458a2e790c1fd6421739d1c を含む) を追加します。
ステップ2: このテーブルに「左右のマージン:自動」を設定します(これは固定幅ブロック要素と同じ方法です)。
HTML 構造:
<div> <table> <tbody> <tr><td> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </td></tr> </tbody> </table></div>CSS スタイル:
<style> table{ margin:0 auto; } ul{list-style:none;margin:0;padding:0;} li{float:left;display:inline;margin-right:8px;}</style> ** このメソッドの欠点は、非セマンティックな HTML タグが追加され、ネストの深さが増すことです 2.2 display;inline メソッドを設定する
ブロックレベルの表示を変更する要素 これはインライン タイプであり、text-align:center を使用して中央揃え効果を実現します。
HTML構造:
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div></body>CSSスタイル:
<style> .container{ text-align:center; } .container ul{ list-style:none; margin:0; padding:0; display:inline; } .container li{ margin-right:8px; display:inline; }</style>
このメソッドの欠点は、ブロックレベル要素の表示がインラインに設定されているため、ボックスモデルなどの多くの機能が欠落していることです
2.3 Set Position:relative と left:50%;親要素に float を設定し、親要素にposition:relativeとleft:50%を設定し、親要素にposition:relativeとleft:-50%を設定することで、水平方向のセンタリングを実現します。子要素。
HTML 構造:
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div></body>CSS スタイル:
<style> .container{ float:left; position:relative; left:50% } .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } .container li{float:left;display:inline;margin-right:8px;}</style>
このメソッドは、ブロック要素を保持しつつ、display:block の形式で表示できます。利点は、サイレント ディスカッション タグを追加せず、ネストの深さを増やさないことです。ですが、その欠点は、position:relative を設定すると、特定の副作用が生じることです。
3 つの方法にはそれぞれ長所と短所があり、実際の状況に応じて選択する必要があります。