CSSの縦横中央寄せは5つとfontawesomeのabsoluteとflexの組み合わせ

プログラミング学習

今更ながらCSSの中央寄せの使い分けの覚書です!たまにしか使わないと忘れるので。

中央寄せに関することはこの記事にまとめてあります。

CSSの縦横中央寄せは5つ覚えれば大丈夫?

text-align: center;とmargin: 0 auto;の使い分け

text-align: center;を親要素に指定:インラインa,img,span
<p style="text-align:center;">
  <img src="..." />
</p>
margin: 0 auto;:ブロック、p,div、widthの指定が必要、インラインは効かない

margin: 0 auto;とdisplay: inline-block;の使い分け

その階層にwidthを指定したくなく、grandchild がたくさんあるとき、margin: 0 auto;よりdisplay: inline-block;が便利。

.parent {
  text-align: center;
}
.child {
  display: inline-block;
}
.grandchild {
  width: 300px;
  background: #323232;
}

margin: 0 auto;の方がお手軽ですが、親要素がインラインの場合も効かない、widthが必要など、いくつか効くために必要な条件があります。ダメだったらdisplay: inline-block;と覚えてもいいかもしれません。

display: inline-block;の中央あわせは、あまり使わないのでつい忘れるのですけど、サイドバーでたまにに使います。

インライン要素の中央合わせは基本、以下です。

  text-align: center;
  vertical-align: middle;

absoluteの上下左右中央寄せ

absoluteを使うならこれ。全部marginを0にする方法もあるけど個人的にはこっちで書いています。

. parent{
  position: relative;
}
. child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform : translate(-50%,-50%);
}

transform: translateX(-50%) translateY(-50%);かけますが、transform : translate(-50%,-50%);と書くことが多いです。

擬似要素の場合もあります。absoluteを使わない場合,before、afterの中央あわせはたぶん面倒だったような…。

absoluteは次の要素と重なる場合があり、その場合marginやpaddingの調整が必要です。

レスポンシブの可変レイアウトの場合、marginも可変にしなきゃならず調整が難航する場合もあるかもしれません。その場合、なるべくabsoluteを使わずflexのレイアウトで逃げることにしています。

ちなみに右下は次のようになります。topとleftでもできるが、レスポンシブデザインの場合、上と左が基準になると問題になりやすい。leftは左寄せだが、rightにすると右寄せになっています。

.r-b{
  position: absolute;
  right: 0;
  bottom: 0;
}

flexの上下左右中央寄せ

flexを使うならこれです。このあたりは迷わないですね。

.flex{
  display: flex;
  justify-content: center;
  align-items: center;
}

flexで幅を伸ばしたい場合は、子要素にflex: 1;をつけます。

justify-content: space-between;とjustify-content: space-around;は幅の再計算が必要なようなので要注意です。

スポンサーリンク

absoluteの深堀

fontawesomeでよく使うabsoluteとflexの組み合わせ

.circle{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  transform : translate(-50%,-50%);
}

円の中にfontawesomeを入れて装飾的に配置するときによく使います。absoluteは配置位置であり、flexはアイコンを中央あわせするものです。

fontawesomeをdisplay: inline-block;であわせることは、結構めんどくさかった気がするのでposition: absolute;を使うことにしています。高さのあわせと円の中にあるアイコンの中央あわせの両方が考える必要があるからです。アイコンのありと装飾なしがある場合はクラスに切り分けます。

absoluteとabsoluteのネスト

absoluteとabsoluteをネストすると、親の位置が基準になるようです。入れ子するかは場合によります。

absoluteがたくさんで、z-indexが効かない

あるあるですかね。absoluteが3つとかあるときは、relativeを1番外にだします。外にださなかったとき、効かないことがありました。

1番大きなレイアウトにrelativeを入れた方がレイアウトが簡単です。

absolute同士を入れ子にするかは状況によって判断です。入れ子は効かない原因にはならないはず。

z-index: 0;は通常の文字などと重なりますね。上にしたい場合は1ですね。

擬似要素のtopで中央寄せ

.top-element::before {
  position: absolute;
  top: -2.2rem;
  left: calc(50% - 50px);
  box-sizing: content-box;
  width: 100px;
  font-size: 12px;
  content: attr(top-text);
  background-color: #413f3c;
  border: 4px #fff solid;
  border-radius: 50%;
  /* transform: translateX(-50%); */
}

見出しのトップに円をつけ、そこに文字を入れたいみたいなことを想定しています。

少し調整したのは、box-sizing: content-box;を入れないと左にborder分ずれる。。

box-sizing:とは次のとおり。

  • box-sizing: content-box;は、widthとheightにborderとpaddingを含めません。
  • box-sizing: border-box;は、widthとheightにborderとpaddingを含めます。

box-sizing: content-box;はデフォルトなので、本来入れる必要はありません。

しかし、nuxtのデフォルトCSSは気を使ってかひっくり返していました。

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

レスポンシブは本来こちらの方が調整しやすいのですけど、今回ずれたため元に戻しました。ずれの原因は深掘りしていないのですけど、解決したのでよしとします。覚書として残りました。

スポンサーリンク

高さの中央合わせ

インライン要素の場合はvertical-align: middle;。

ブロック要素の場合は次のようになりますが、line-heightは1行しか使えません。

.square {
  width: 30px;
  height: 30px;
  font-size: 16px; 
  line-height: 30px;
}

擬似要素とflexは上記のお決まり文句があるためそれです。

スポンサーリンク

右寄せ

考え方は中央あわせと一緒です。

text-align: right;

ブロック要素の場合、floatよりこっちですかね。

.btn {
  margin: 0 0 0 auto;
}

擬似要素とflexは上記のお決まり文句があるためそれです。

Bootstrapの中央あわせ

Bootstrapを使う場合、b-row側でtext-centerを指定した方が話がはやい場合がある。予備知識として覚えておこう。

<b-row class="my-0 py-0 text-center">
</b-row>

他にもあるけど、今のところ、この5種類の使い分けで事足りていますが、5つ覚えれば大丈夫ですかね?

コメント

タイトルとURLをコピーしました