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

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

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; まとめ