ホームページ > 記事 > ウェブフロントエンド > 水平方向のセンタリングのまとめ - 可変幅ブロック要素 Method_html/css_WEB-ITnose
水平方向のセンタリングのまとめ - 可変幅ブロック要素 Method_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:32:191258ブラウズ
実際の作業では、Webページのページナビゲーションなどで「幅が可変のブロック要素」の中心を設定する必要が出てきます。 ページ数は不確実なので、設定で制限することはできません。幅。
可変幅のブロック要素を中央に配置するには 3 つの方法があります (現在、これら 3 つの方法がより頻繁に使用されます):
- テーブルタグを追加する
- 表示を設定する;インラインメソッド
- 位置:相対と左:50% を設定する;
最初の方法:
ステップ 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>
2 番目の方法:
ブロックレベル要素の表示をインライン型に変更し、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> 最初の方法と比較したこの方法の利点は、非セマンティックなタグを追加する必要がなく、タグのネストの深さが簡素化されることです。ただし、いくつかの問題もあります。ブロック要素の表示タイプがインラインに変更され、インライン要素に変換されるため、長さの値の設定などの一部の機能が失われます。
3 番目の方法:
親要素に float を設定し、次に親要素にposition:relative および left:50% を設定し、子要素にposition:relative および left:-50% を設定することで、水平方向のセンタリングを実現します。要素。
コードは次のとおりです:
<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 つの方法は広く使用されており、どの方法を選択するかは特定の状況によって異なります。