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

  • ×
  • ×
  • ×
  • S
  • E
  • O

HOME > ブログ > 【忘備録】flexで上下にテキスト揃える方法

SUGOYOKU BLOG

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

はじめに

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

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

簡単な画

今回は、下の画像のようにしたいと思います。 flex テキスト下揃え

簡単なコード

重要箇所

.boxにheight:100%;を追加するのが重要となってきます。 前にもご紹介をした「float後にdiv要素のテキストを下揃えにする方法」とほぼ同じ内容ですね。お暇な方は見てください。
今回は自分たちが忘れないための忘備録として残しておきます。 勉強されている方、テキストの位置が上手くいかない方は参考にしていただけたら幸いです。

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

マーケティング手法22選

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

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



補助金 お問い合わせ

ホームページの事でお困りならこちらから

お見積り・ホームページ制作・運用、広告に関するご質問まで、どんなことでもお気軽にご相談ください。
日・祝日・休業日以外は24時間以内に返信いたします。

Copyright (c) SUGOYOKU All Rights Reserved