WEB作成メモBLOG

div内の高さにおける真ん中揃えをする為のcss

HTML・CSS | 2012.05.16

スタイルシートで高さの指定と言えば、vertical-alignプロパティです。
値としては、top、middle、bottom、baselineがよく使われます。
便利なのですが、テーブルのセル(td)の時しか使えないな・・・と思いこんでいたのですが、場合によってはdivにおいても使える事があります。

条件としては、高さが決まっている事と、divに入る要素が1行の場合です。
方法としては、divのclass指定で、高さ(hight)と行の高さ(line-hight)を指定し、中に入る要素のvertical-alignを指定してやります。

vertical-alignプロパティは、ブロックレベル要素には使えないのですが、インライン要素であれば使えるというのがポイントです。

経験的に「あれは出来ない。」「これは出来ない。」と思いこんでいるものも、根本的理解を見直してみると解決法が見つかる事もあります。
慣れてきても「出来るかも」と探求する気持ちは大切にしたいものです。

【PR】使わなくなったパソコンはありませんか?パソコン無料回収

関連する記事

カラーミーショップはリアルな店舗を持っていなくても、ネットを通じて商品を販売する楽しみを多くの人に実感してもらえるショッピングカートです。これまでに23万を超えるユーザー様からお申込みをいただいております。
カラーミーショップなら誰かに(大手に)頼らなくても、あなた好みのネットショップを作れます。あなたがセレクトした商品や作った商品の魅力を伝え、それを欲しいと思ってくれる人にお届けしてみませんか。
30日間、無料でお試しいただけるので、初心者の方やネットショップ作成サービスで悩んでいる方も、安心してご利用いただけます。
ロリポップ!レンタルサーバー!はあなたの「やってみたい!」を応援します!
ロリポップ!なら、ホームページ、ブログ、ネットショップ…
これらが今すぐ、そして簡単にできちゃう!
マニュアルやライブチャットを完備しているので、ホームページ初心者でも安心。
これだけついてるのに月額100円(税抜)~ととってもお得。
もちろん無料のお試し期間も10日間あるので安心ですね。

▼ロリポップ!レンタルサーバーはこちら
▼インストール不要の画像作成ツール▼
画像作成ツールボタンメーカープロ

カテゴリー

アーカイブ


リンク

アフラット
ページのトップへ戻る