こんにちは、スカイドアホールディングスのmedia事業部です。
テキストやイメージを縦の中央に揃えたいのに、うまくいかない。その方法は何だろう？という方のためにその解決案を書きたいと思います。
疑似要素beforeかafterを使用する
縦中央揃えをする要素の前に擬似要素を使ってdisplayはinline-block,heightは100％に指定する。
そして縦中央揃えをする要素にvertical-align:middleを指定すると、疑似要素に沿って縦中央配置が適用されるようになります。
htmlコード
|
1 2 3 4 5 |
<div class="wrap"> <div class="wrap-inner"> <p>テキストテキストテキスト。テキストテキストテキスト</p> </div> </div> |
cssコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.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でしょうか？
他にもいろいろ方法がありますが、今度ご紹介したいと思います。
では。