css 回り込みについて

Question

cssの回り込みで躓いています。
h2で指定したタイトルの右に横並びのメニューを
設置したいと思っております。
また、横並びのメニューは右寄せにしようとしています。

<div>
<h2>test</h2>
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>
</div>

この場合
h2にfloat:leftを指定すると
横並びのメニューは右に回り込むのですが、
文字の位置（高さ）がh2の上にそろう形になります。

h2の文字の下側がそろう形にするにはどのように指定すればよろしいでしょうか？

ご教授お願い致します。

Answer 1

div {
  display: table-row;
}

h2 {
  display: table-cell;
  vertical-align: middle;
}

ul {
  display: table-cell;
  text-align: right;
  vertical-align: middle;
  width: 400px;
}

li {
  display: inline-block;
}

Comments

[beginner_t]

わかりやすいcssありがとうございました。

Answer 2

フロートで回りこみをさせた場合、下で揃えることは仕様的に不可能です。
（必ず上揃えとなります。）

ですので、フロート以外の方法を試みるか、手動でmargin調整して中央揃えになっているように見せかけるか、といった形になります。

フロート以外の方法で横並びかつ上下中央揃えにする方法は、他の方がおっしゃっているflexの他、display:table-cellとか、position:absoluteとか、display:inline-blockとか色々あります。

個人的にはサポート範囲と応用範囲の広いdisplay:table-cellがおすすめです。

Comments

[beginner_t]

フロートの仕様を初めて知りました。
ありがとうございました。
table-cellの場合新たにレスポンシブにするときの回避方法を考えたいと思います。

Answer 3

div要素にdisplay:tableを指定して、h2、ulをテーブルの子要素として中央揃えにすればいけますね

Answer 4

display: flex
とかでどうですかね。

http://liginc.co.jp/web/html-css/css/21024#a8