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

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

WBOY

リリース： 2016-06-24 11:32:19

オリジナル

1294 人が閲覧しました

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

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

テーブルタグを追加する
表示を設定する;インラインメソッド
位置:相対と左:50% を設定する;

最初の方法:

ステップ 1: 設定する必要がある中央の要素の外側に table タグ (、、を含む) を追加します。

ステップ 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 つの方法は広く使用されており、どの方法を選択するかは特定の状況によって異なります。