MENU
  1. ホーム
  2. css
  3. 【縦横中央寄せ】fontawesome/labelのabsoluteとflexの組み合わせ【CSS】

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

css

今更ながら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の上下左右中央寄せ(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を追加すると要素が多い場合、大変な気がします。

スポンサーリンク

flex-direction: column;の使い方

<a href="https://x.com/intent/post?text=Check+this+out!" target="_blank" id="x-button">
    <div class="square-btn icon-square-btn">
    <div class="twix-svg">
        <svg width="100" height="102" viewBox="0 0 1200 1227" xmlns="http://www.w3.org/2000/svg">
        <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"/>
        </svg>
    </div>  
    ポストする
    </div>
</a>
.icon-square-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

flex-direction: column;を使用することで、フレックスコンテナ内の子要素（この場合はアイコンとテキスト）が縦方向に配置されます。

SVGのviewBoxとコンテナのサイズに基づいて最適なレンダリングを行うため、直接サイズを指定せずもdivでラップしてサイズ指定を行っています。

スポンサーリンク
css
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメントする