CSS を使用して水平方向の中央揃えを実現するための 4 つのアイデアの概要-CSSチュートリアル-php.cn

CSS を使用して水平方向の中央揃えを実現するための 4 つのアイデアの概要

高洛峰

リリース： 2017-03-13 17:38:27

オリジナル

1246 人が閲覧しました

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

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

アイデア 1: 親要素に
text-align
:center を設定して、インライン要素の水平方向の中央揃えを実現します子要素の
display を inline-block に設定し、子要素がインライン要素
[注] IE7 ブラウザと互換性を持たせたい場合は、display:inline;zoom:1; を使用して inline-block の効果を実現できます

<style>   
.parent{text-align: center;}       
.child{display: inline-block;}   
</style>    
<p class="parent" style="background-color: gray;">   
  <p class="child" style="background-color: lightblue;">DEMO</p>   
</p>

ログイン後にコピー

アイデア2: 自身の要素に

マージン

を設定する: 0 ブロックレベル要素の水平方向のセンタリングを自動実装【1】サブ要素をテーブルとして表示し、サブ要素をブロックレベル要素にする同時に、テーブルも折り返され、コンテンツによって幅が拡張されます

[注 ] IE7 ブラウザと互換性を持たせるには、子構造をに変更できます。 DEMO

<style>   
.child{   
    display: table;   
    margin: 0 auto;   
}   
</style>    
<p class="parent" style="background-color: gray;">   
  <p class="child" style="background-color: lightblue;">DEMO</p>   
</p>

ログイン後にコピー

【2】子要素の幅が固定されている場合、幅が設定されていない場合は

絶対配置
の

ボックスモデル

属性を使用できます。、子要素は引き伸ばされます

<style>   
.parent{   
  position: relative;   
}   
.child{   
 position: absolute;   
 left: 0;   
 rightright: 0;   
 margin: 0 auto;   
 width: 50px;   
}   
</style>    
<p class="parent" style="background-color: gray;height: 20px;">   
    <p class="child" style="background-color: lightblue;">DEMO</p>      
</p>

ログイン後にコピー

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

[1] translation() ディスプレイスメント
関数と連携します
翻訳関数の割合は自身の幅に相対的なので、左: 50% と翻訳 X (-50%) でセンタリング効果を実現できます [注意] IE9- ブラウザは

<style>   
.parent{   
  position: relative;   
}   
.child{   
  position: absolute;   
  left: 50%;   
  transform:translateX(-50%);   
}   
</style>    
<p class="parent" style="background-color: gray;height: 20px;">   
  <p class="child" style="background-color: lightblue;">DEMO</p>   
</p>

ログイン後にコピー

【2】をサポートしていません】相対付き

子要素が絶対に設定されているため、相対オフセット属性はそれ自体に対して相対的であるため、相対を使用する場合は、その幅が同じになるようにレイヤー < ;p> を追加する必要があります。サブ要素の幅

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

<style>   
.parent{   
  position: relative;   
}   
.childWrap{   
  position: absolute;   
  left: 50%;   
}   
.child{   
  position: relative;   
  left: -50%;   
}   
</style>    
<p class="parent" style="background-color: gray;height: 20px;">   
  <p class="childWrap">   
    <p class="child" style="background-color: lightblue;">DEMO</p>    
  </p>      
</p>

ログイン後にコピー

[3] 負のマージン付き

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

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

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

<style>   
.parent{   
  position: relative;   
}   
.childWrap{   
  position: absolute;   
  left: 50%;   
}   
.child{   
  width:50px;   
  margin-left:-50%;   
}   
</style>    
<p class="parent" style="background-color: gray;height: 20px;">   
  <p class="childWrap">   
    <p class="child" style="background-color: lightblue;">DEMO</p>    
  </p>      
</p>

ログイン後にコピー

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

【注意】IE9ブラウザはをサポートしておりません
【1】フレックスコンテナに主軸の配置を設定します jusify-content:center

<style>   
.parent{   
  display: flex;   
  justify-content: center;   
}   
</style>    
<p class="parent" style="background-color: gray;">   
    <p class="child" style="background-color: lightblue;">DEMO</p>      
</p>

ログイン後にコピー

【2】】フレックス項目にマージンを設定: 0 auto
rrree
以上がCSS を使用して水平方向の中央揃えを実現するための 4 つのアイデアの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。