skillup

技術ブログ

デザイン

vertical-alignの挙動に関して

投稿日:

cssでの中央ぞろえを行う場合、横は案外簡単なんですが、縦の中央ぞろえは結構難しかったりします。

css中央ぞろえ

ざっとまとめると以下のようなかんじでしょうか。

  1. テキストのみの1行タイプであればline-height、
  2. ブロックレベルではposition:absoluteでtop:50%とネガティブマージン
  3. またそもそもheightを設定せず、paddigだけで幅をとる
  4. テーブルやインライン要素ではvertical-align:middleをとる

特にvertical-alingなんですが、きかないことが多いんですよね・・table要素やdisplay:table,display:table-cellを使えばきくんですが、一般的なインラインではきかないようにみえることがおおいです。

で、調べてみるときいてないのではなくて基準が違うようですね。

https://github.com/umanari145/css

上記のソースのvertical.htmlの例をみてもらえればわかりますが、要素がすべて同じ要素だと上にそろってしまい、middleを設定してもbottomを設定しても変わりません。ただvertical-align:-20pxなどはききます。

ただ高さが全く違う要素を設定した場合はこれが自由にききます。このことからインラインのvertical-alignの基準は親要素ではなく、お互いの子要素をみて基準を決めているようです。

つまり各要素の中心ということになるので、インライン要素の高さがすべて同じ場合、middleを指定してもすべて同じなのでうごかないということになります。

※display:table-cellは親要素が基準になります。

参考

vertical-align: middle についての覚書

高さの異なるボックスを横に並べるならfloatよりinline-blockが便利

floatとinline-blockの使い分け。そして時代は「flex」へ

 

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSS positionについて

本日はpositionについて。 要素を通常、配置される場所から別の場所に配置させたいような場合positionを使います。 Contents1 positionの使い方1.1 相対配置 relati …

no image

lessサンプル

lessのサンプル Contents1 lessファイル構成2 ソース3 注意点4 参考リンク lessファイル構成 header,footer sytle 変数 lib 関数 common head …

no image

css tips display:table,marginの相殺,font-size指定,margin上下の%など

昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。 Contents1 display:table2 inputのfocus時の青を消す3 marginの相殺4  font-s …

no image

破綻しないCSSについて

業務では開発する人間があまりおらず、プログラム以外にもデザイン(CSSなどのレイアウト)やらサーバーやら一人ですべてやることが多いです。 CSSなんかは最初に触ってから4,5年は立ちますけど、系統的に …

no image

実務でCSSを書く時のポイントについて

先月にかなりたくさんCSSを書いたんでその時感じたポイントみたいなものを。 Contents1 いきなりかかずにまず共通部分をみつける2 見た目の調整には紙に印刷して横においておく3 色や幅、フォント …