frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

ボックスの中の画像やテキストを上下中央揃えにする方法

スポンサードリンク

上下中央に配置する方法はいろいろありますがボックスの中のテキストを上下中央に配置したい場合は、display:tableを使うとよいでしょう。

ボックスの中にテキスト

See the Pen jraOXp by funclur (@funclur) on CodePen.


point

  • 1.boxにdisplay:tableをテキストにdisplay:table-cellを充てます
  • 2.boxにheightを指定します(これを入れないと高さがわからないため中央にならない)
  • 3.テキストにtext-align: center;とvertical-align: middle;を充てます

また、ボックスの画像を上下中央に配置したいときも同じようにします。

ボックスの中に画像

See the Pen amVbNP by funclur (@funclur) on CodePen.