【CSSの縦横中央寄せは5つ覚えれば大丈夫?】display: inline-block;とmargin: 0 auto;の使い分け

おすすめのオンラインプログラミング学習

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

とくに、margin: 0 auto;とdisplay: inline-block;の使い分けを明快にしたいです。

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

text-align: center;:インラインa,img,span
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%);
}

擬似要素の場合もあります。

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

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

flexの上下左右中央寄せ

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

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

(おまけ)absoluteとflexの組み合わせ(fontawesomeでよく使う)

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

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

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

(おまけ)Bootstrapを使う場合

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

<b-row class="my-0 py-0 text-center">
</b-row>
人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

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