こんにちは、スカイドアホールディングスのmedia事業部です。
テキストやイメージを縦の中央に揃えたいのに、うまくいかない。その方法は何だろう?という方のためにその解決案を書きたいと思います。
疑似要素beforeかafterを使用する
縦中央揃えをする要素の前に擬似要素を使ってdisplayはinline-block,heightは100%に指定する。
そして縦中央揃えをする要素にvertical-align:middleを指定すると、疑似要素に沿って縦中央配置が適用されるようになります。
htmlコード
<div class="wrap"> <div class="wrap-inner"> <p>テキストテキストテキスト。テキストテキストテキスト</p> </div> </div>
cssコード
.wrap { text-align: center; height: 300px; background:#000; } .wrap:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .wrap-inner { display: inline-block; vertical-align: middle; width: 300px; padding: 10px 15px; background-color: #c00; } .wrap-inner p { background:#ffffff; text-align: left; }
さいご
いかかでしょうか?解決OKでしょうか?
他にもいろいろ方法がありますが、今度ご紹介したいと思います。
では。