ホームページ  >  記事  >  ウェブフロントエンド  >  水平方向のセンタリングのまとめ - 可変幅ブロック要素 Method_html/css_WEB-ITnose

水平方向のセンタリングのまとめ - 可変幅ブロック要素 Method_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:32:191286ブラウズ

実際の作業では、Webページのページナビゲーションなどで「幅が可変のブロック要素」の中心を設定する必要が出てきます。 ページ数は不確実なので、設定で制限することはできません。幅。

可変幅のブロック要素を中央に配置するには 3 つの方法があります (現在、これら 3 つの方法がより頻繁に使用されます):

  1. テーブルタグを追加する
  2. 表示を設定する;インラインメソッド
  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 つの方法は広く使用されており、どの方法を選択するかは特定の状況によって異なります。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。