CSSが水平中央を実現する4つの考え方

18277 ワード

×
ディレクトリ[1]text-align[2]margin[3]absolute[4]flex
前の話
水平中心はよくある問題です.方法が多いように見えますが、大通りはローマに通じています.しかし、システムの整理の下で、実はいくつかの考え方をめぐって展開されています.水平中心の4つの考え方について紹介します

構想1:親要素にtext-align:centerを設定して行内要素の水平中央を実現する
サブエレメントのdisplayをinline-blockに設定し、サブエレメントを行内エレメントにします.
[注意]IE 7-ブラウザと互換性を持つには、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】サブエレメントのdisplayをtableとし、サブエレメントをブロックレベルエレメントとするとともに、tableは包帯性を有し、幅はコンテンツによって広げられる
[注意]IE 7-ブラウザに対応するには、childの構造を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:絶対位置決めのオフセット属性により水平中央を実現する
【1】translate()シフト関数の組み合わせ
translate関数のパーセンテージは自己幅に対しているので、left:50%はtranslate X(-50%)と組み合わせて中央効果を実現できます.
[注意]IE 9-ブラウザはサポートされていません

<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数値型のオフセット属性は自身に対してですが、パーセントはブロックを含むものに対してです.サブエレメントはabsoluteに設定されているため、relativeを使用する場合は、サブエレメントの幅と同じ幅に

構造を追加する必要があります.
[注意]この方法は完全に互換性があるが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】マイナスマーキング
marginの割合はブロックを含むことに対して大きいので、

構造を1層増やす必要がある.幅widthのデフォルト値はautoなので、負のmarginを設定するとwidthも大きくなります.この場合は定幅処理が必要です
[注意]完全互換性はありますが、ページ構造や定幅処理を増やす必要があるため、適用シーンが制限されています

<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を用いて水平中央を実現する
[注意]IE 9-ブラウザはサポートされていません
【1】伸縮容器に主軸揃え方式justify-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】伸縮項目にmargin: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>

【2021天梯競技訓練-1】7-7現金入り封筒(25点)

CSSは垂直中心の4つの考え方を実現する