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

cakePHP+bootstrapでのページャー

cakePHP+bootstrapでページャーのリンクを下記のように出力したいときのメモを。 ソース コントローラーのほうでは特に設定する必要なはく、HTMLのほうで下記のように設定すればOKです。 …

no image

checkboxのカスタマイズ

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

no image

フォーカス時のみ書き込み可能になるHTML要素について。contenteditableなど

通常はただのテーブル(or普通のHTML)ですが、クリックするとinputになり、入力が可能になる手法について。 contenteditableなど 普通のHTML要素に [crayon-5db112 …

no image

tableのレイアウトに関して

tableのcssに関して。 https://github.com/umanari145/css 幅を決めるのでも%表記をしたいときはauto、数値固定で行きたいときはfixed。 詳しくはリンクのt …

no image

固定されたナビ(ヘッドとサイド)

boostrapでサイトを作るときにヘッダーとサイドバーを固定したいときについてメモします。 Contents1 ヘッダーを固定したい場合2 サイドバーを固定したい場合3 参考リンク ヘッダーを固定し …