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 ブラウザと互換性を持たせるには、子の構造を

<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付き

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

<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>

<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>

<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>

<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>