【忘備録】flexで上下にテキスト揃える方法

SUGOYOKU BLOG

1 はじめに

はじめに

福岡のホームページ制作・SEO対策の株式会社スゴヨクです。
floatの時代が終わってflexがメインとなってきましたね。
「Can I Use」で見るとほぼ最新のブラウザは使える仕様となっていますね。

少し考えたので、忘備録として残しておきます。

簡単な画

今回は、下の画像のようにしたいと思います。

簡単なコード

/* 大枠 */
.flex{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
/* 中身 */
.block{
width:50%;
}
.box{
width:50%;
position: relative;
height:100%;/* ←← ここ重要 */
}
.ttl{
font-size:2rem;
}
.txt{
position: absolute; /* ←← ここ重要 */
bottom:0; /* ←← ここ重要 */
}

/* 大枠 */

.flex{

display:-webkit-box;

display:-ms-flexbox;

display:flex;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

}

/* 中身 */

.block{

width:50%;

}

.box{

width:50%;

position: relative;

height:100%;/* ←← ここ重要 */

}

.ttl{

font-size:2rem;

}

.txt{

position: absolute; /* ←← ここ重要 */

bottom:0; /* ←← ここ重要 */

}

重要箇所

.boxにheight:100%;を追加するのが重要となってきます。前にもご紹介をした「float後にdiv要素のテキストを下揃えにする方法」とほぼ同じ内容ですね。お暇な方は見てください。

今回は自分たちが忘れないための忘備録として残しておきます。勉強されている方、テキストの位置が上手くいかない方は参考にしていただけたら幸いです。

【実践マーケティング手法２２選】無料ダウンロード

助成金を使ってホームページを制作しませんか？

スゴヨクでは、小規模事業者持続化補助金を使ったホームページ制作を行っています。
助成額が3分の2、最大50万円まで補助されるので、（要件次第で100万円も可能）
ホームページ制作、広告をお考えの方は一度ご連絡ください。
申請は無料なので、まずはご連絡いただけると幸いです。

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。

福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

SUGOYOKU BLOG