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

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …

no image

lessについて(CSSライブラリ)

Contents1 lessって?1.1 スコープが使える1.2 変数が使える1.3 関数化1.4 インポート2 インストール3 コンパイル lessって? CSSの保守性を向上させるライブラリ。これ …

no image

transition関連

cssのanimationに関して。 例えばhoverしたときに色が変わる仕様はよくあることだと思いますが、transitionを入れることで時間差をつけることができます。 [crayon-609c8 …

no image

checkboxのカスタマイズ

ブラウザのディフォルトではなくcheckboxをカスタマイズしたいとき。 やったことなかったんですが、やってみると結構面白い。 Contents1 ソース2 参考リンク ソース まずはソースを。 ht …

no image

data- HTML5のカスタムデータについて

HTML5のカスタムデータ属性について。 HTML5ではタグにdata-*とすることで任意の値を持たせることができます。 いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ 例として下記 …