【縦横中央寄せ】fontawesome/labelのabsoluteとflexの組み合わせ【CSS】

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

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

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

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

<p style="text-align:center;">
  <img src="..." />
</p>

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の上下左右中央寄せ(buttonの横並び)

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

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

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

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

buttonの横並びもflexにしましょう。flexなら親要素のみですが、inlineblockを使うと各々のボタンにつけなければいけません。

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をネストすると、親の位置が基準になるようです。入れ子するかは場合によります。

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

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

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

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

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

なお、z-indexはrelativeやabsoluteなどのpositionと一緒に使わないと効かないようです。

擬似要素の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;
}

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

absoluteで2行になる

absoluteが文字の場合、2行になってしまう場合があります。widthを指定してあげましょう。

checkboxのlabelの高さ(上下)中央寄せ

チェックボックスのアイコンと文字がずれるのはよくあるあるあるです。

ラジオボタンやチェックボックスはlabel、input、spanみたいなソースコードになります。labelとspanはインライン要素です。

チェックボックスと文字が揃わない解決策として、absoluteやvertical-align: middleの例が多かったです。ただ、個人的にはこちらが簡単な気がします。

inline-block;をflexに切り替えて解決しました。

label {
  display: flex;
  align-items: center;

  /* display: inline-block; */
}

中央合わせが効かない

今までの原因でいうと上位階層のmarginやpaddingなどやパーセント指定が原因になっていることがありますね。そちらを修正するとなおります。

display: flex;は孫要素に効かない

display: flex;は孫要素に効かないです。その場合、親要素にもいれないとダメです。

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

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

高さの中央合わせ

インライン要素の場合はvertical-align: middle;。テーブルのcellにも使えます(ただし、スマホに切り替えたときbeforeに付随する場合は効かない)。

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

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

aタグの上下中央寄せ

aタグの上下中央寄せは、大抵ボタンの中身がaタグのことが多いのでabsoluteです。

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

flexとabsoluteがトラブルがないためよく使います。

display: inline-blockの上揃え

style=" margin-top: 0; vertical-align: top;"

余計なmarginが入っている場合はとります。

右寄せ

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

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つ覚えれば大丈夫ですかね?

おまけ：一行で左寄せと右寄せ

モバイルなんかでたまに使います。

(左)HP 100(右)

<div class="frame">
  <span class="left">HP</span>
  <span class="right">100</span>
</div>

.left, .right {
  display: inline-block;
}

.frame {
  display: flex;
  justify-content: space-between;
}

コラム：Webアプリ開発は中央寄せと左寄せをどちらを基準にするか

まあ、ケースバイケースなんでしょうけど、大抵こうなるみたいなのがありますかね。

中央寄せ

• ロゴ(タイトル)
• 画像
• アクションボタン

左寄せ

• 見出し
• テキスト
• チェックボックス
• セレクトボックス
• ラジオボタン

で、左寄せの方が多い気がします。

.layout {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左寄せにします */
    width: 80%; /* 適切な幅を設定 */
    margin: 0 auto; /* 中央配置のためのマージン */
}

.center-content {
    text-align: center; /* ロゴ、画像、アクションボタンをインライン要素にする */
}

ロゴ、画像、アクションボタンをインライン要素にするとtext-align: center;のみですみます。逆に左寄せの方にclassを追加すると要素が多い場合、大変な気がします。