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

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

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

no image

css flexboxについて どんなことができるのか?

CSSを使い始めて数年がたっていますが、いまだに最適な書き方がようわかっとりません(汗) 特に難しいのが全体的なレイアウトの決定でfloatとかpositionなんかを使っていろいろと悪戦苦闘していま …

no image

画面系小ネタposition:sticky+datalist(プルダウン+自由入力)

画面系の小さい小ネタなど。 Contents1 position:sticky2 datalist(プルダウン+自由入力) position:sticky ヘッダーに関して画面をスクロールすると、付い …

no image

sassについて

以前ちょろっと勉強していたことはあるんですが、仕事で使うことになりそうなんで復習。 Contents1 sassとは2 インストール&コンパイル3 一般的な記法など4 参考リンク sassとは 一言で …

no image

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」 …