かわたま.net

Enjoy Creative! かわたまのwebメモ

【css】高さの違う横並びのlistを縦方向に中央揃えにしたいときの記述例

2014 June 08

Tag:

ul と li を使って何らかの要素を横並びにするとき、縦方向に中央揃えしたい場合や、上下で揃えたい場合は
display: inline-block;
を使うと縦方向の基準を指定できます。

displayプロパティとは

displayは、要素の「表示形式」を指定するプロパティ。
ブロック要素をインライン形式で表示したい場合や、インライン要素をブロック形式で表示したい場合に記述します。

横並びの list を中央揃えにする css 記述サンプル

  • menu01
  • menu02
    menu02
  • menu03
    menu03
    menu03

css

ul.hoge li {
  display: inline-block;
  vertical-align: middle;
}
/* もしくは */
ul.hoge li {
  display: table-cell;
  vertical-align: middle;
}

横並びの list を下揃えにする css 記述サンプル

  • menu01
  • menu02
    menu02
  • menu03
    menu03
    menu03

css

ul.hoge li {
  display: inline-block;
  vertical-align: bottom;
}
/* vertical-align: bottom; の記述なしでも通常下揃えになります */

横並びの list を上揃えにする css 記述サンプル

  • menu01
  • menu02
    menu02
  • menu03
    menu03
    menu03

css

ul.hoge li {
  display: inline-block;
  vertical-align: top;
}

display: inline-block; まとめ

・要素が横並びになる
・要素の幅(width)高さ(height)を指定できる
・上下左右に margin を指定できる
・上下左右に padding を指定できる
・text-align を親ブロックに指定することで、左寄せ、右寄せを指定できる。
・vertical-align で縦方向の基準を指定できる。