CSS_html/css_WEB-ITnose で水平方向のセンタリングを実装する 4 つの方法

× 目次 [1]text-align [2]margin [3]absolute [4]flex

前の単語

水平方向の中央揃えはよくある問題です。道はたくさんあるようで、すべての道はローマに通じているようです。しかし、体系的にレビューした後、実際にはいくつかのアイデアを中心に展開します。この記事では、水平方向のセンタリングに関する 4 つのアイデアを紹介します

アイデア 1: 親要素に text-align:center を設定して、インライン要素の水平方向のセンタリングを実現します

子要素の表示を inline-block に設定します。子要素は Inline 要素になります

[注] IE7 ブラウザと互換性を持たせたい場合は、display:inline;zoom:1; を使用して inline-block の効果を実現できます

<style>.parent{text-align: center;}    .child{display: inline-block;}</style>

<div class="parent" style="background-color: gray;">  <div class="child" style="background-color: lightblue;">DEMO</div></div>

アイデア 2: 独自の要素で margin: 0 auto を設定して、ブロックレベル要素の水平方向の中央揃えを実現します

[1] サブ要素をテーブルとして表示し、サブ要素をブロックレベル要素にします。同時にテーブルも折り返され、コンテンツによって幅が拡張されます

[注] IE7 ブラウザと互換性を持たせるには、子の構造を

DEMO

<style>.child{    display: table;    margin: 0 auto;}</style>

<div class="parent" style="background-color: gray;">  <div class="child" style="background-color: lightblue;">DEMO</div></div>

【2】子要素の幅が固定されている場合は、絶対配置ボックス モデル属性を使用できます。幅が設定されていない場合、子要素は中央揃え効果を実現します。伸びる

<style>.parent{  position: relative;}.child{ position: absolute; left: 0; right: 0; margin: 0 auto; width: 50px;}</style>

<div class="parent" style="background-color: gray;height: 20px;">    <div class="child" style="background-color: lightblue;">DEMO</div>   </div>

3 つのアイデア: 絶対位置の offset 属性を使用して水平方向のセンタリングを実現する

【 1】translate() 変位関数を使用する

translation 関数のパーセンテージは相対的です独自の幅になるので、left:50%とtranslateX(-50%)を組み合わせるとセンタリング効果が得られます

[注意] IE9ブラウザは

をサポートしていません

<style>.parent{  position: relative;}.child{  position: absolute;  left: 50%;  transform:translateX(-50%);}</style>

<div class="parent" style="background-color: gray;height: 20px;">  <div class="child" style="background-color: lightblue;">DEMO</div></div>

【2】relative付き

子要素が絶対に設定されているため、相対オフセット属性はそれ自体に対して相対的なものになります。そのため、相対を使用する場合は、

構造のレイヤーを追加して、その幅を子の幅と同じにする必要があります。 element

[注意] このメソッドは完全に互換性がありますが、HTML 構造を追加します

<style>.parent{  position: relative;}.childWrap{  position: absolute;  left: 50%;}.child{  position: relative;  left: -50%;}</style>

<div class="parent" style="background-color: gray;height: 20px;">  <div class="childWrap">    <div class="child" style="background-color: lightblue;">DEMO</div>   </div>   </div>

【3】負のマージン付き

マージンのパーセンテージは包含ブロックに対して相対的であるため、

構造を追加する必要があります。幅のデフォルト値は自動なので、マイナスのマージンを設定すると幅も増加します。したがって、現時点では固定幅処理が必要です

[注意] 完全互換ですが、ページ構造と固定幅処理を増やす必要があるため、適用シナリオは限定されます

<style>.parent{  position: relative;}.childWrap{  position: absolute;  left: 50%;}.child{  width:50px;  margin-left:-50%;}</style>

<div class="parent" style="background-color: gray;height: 20px;">  <div class="childWrap">    <div class="child" style="background-color: lightblue;">DEMO</div>   </div>   </div>

アイデア4: フレキシブルボックスモデルを使用する Flex は水平方向のセンタリングを実装します

【注意】IE9 ブラウザは

をサポートしていません

【1】スケーラブルコンテナに主軸の配置を設定する jusify-content:center

<style>.parent{  display: flex;  justify-content: center;}</style>

<div class="parent" style="background-color: gray;">    <div class="child" style="background-color: lightblue;">DEMO</div>   </div>

【2】スケーラブルプロジェクトについて マージン設定：0 auto

<style>.parent{display: flex;}.child{margin: 0 auto;}</style>

<div class="parent" style="background-color: gray;">    <div class="child" style="background-color: lightblue;">DEMO</div>   </div>