マイティーBlog|リスティング広告やWEBマーケティング情報

トップページ ブログ > デザイン > 【CSS】意外と盲点『上下』中央ぞろえ

Mighty Ace Blog

マイティーBlog

デザイン

2021.05.16

【CSS】意外と盲点『上下』中央ぞろえ


左右中央揃えはmargin:0 auto;など有名ですが

意外と盲点な「上下」中央揃えの紹介をします!

意外と利用用途はあるので知っておくと便利です!

 

●line-height

一行しかないテキストにオススメ

行間=親要素の高さにすると親要素に対して上下中央揃えにできます。

※複数行には使えないので注意!

 

●display:inline-block; vertical-align:middle;

一番コンテンツの多い要素の高さに合わせて上下中央揃えになってくれます。

文字数の差が大きいメニューなどにオススメ。

display: inline-block;

vertical-align: middle;

★padding

1行でも複数行でもOK!

高さが決まってない場合に、padding上下に同じ値を入れましょう。

padding: 10px 0;

●position

親要素に対して

position:relative;

子要素に

position:absolute;
top: 0;
bottom: 0;
margin: auto;

と記述すると上下中央揃えになります

(left:0; right:0;を加えると上下左右中央にも!)

 

●display:flex;

親要素に

display: flex;

子要素に

align-items: center;

を指定するだけで、上下中央揃えになります!!

個人的に一番シンプルで簡単なのでオススメ◎

この記事に関連するタグ

正しい効果測定は、正しい計測設定から!Googleアナリティクス設定項目チェックシート(無料)

正しい効果測定は、正しい計測設定から!Googleアナリティクス設定項目チェックシート(無料)

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。

Googleアナリティクス,アクセス解析でWeb集客分析・改善なら福岡のマイティーエース

リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください

株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。

あわせて読みたい人気の記事

よく見られている記事

最新記事

BLOG MENU

株式会社マイティーエースのSNSもチェックしてみてください

Copyright (c)2014-2020 MightyAce, inc. All Right Reserved.