こんにちは、スカイドアホールディングスのmedia事業部です。

テキストやイメージを縦の中央に揃えたいのに、うまくいかない。その方法は何だろう?という方のためにその解決案を書きたいと思います。

疑似要素beforeかafterを使用する

縦中央揃えをする要素の前に擬似要素を使ってdisplayはinline-block,heightは100%に指定する。

そして縦中央揃えをする要素にvertical-align:middleを指定すると、疑似要素に沿って縦中央配置が適用されるようになります。

htmlコード

cssコード

さいご

いかかでしょうか?解決OKでしょうか?
他にもいろいろ方法がありますが、今度ご紹介したいと思います。

では。