Вертикальное выравнивание не работает на плавающих элементах

Question

Привет, я пытаюсь получить два элемента по вертикали.

<div> 
    <h1>heading</h1> 
    <nav> 
    <ul>LIs...</ul> 
    </nav> 
</div> 

Я хочу, чтобы h1 плавал влево, а навигатор плавал вправо. Но вертикальное выравнивание не работает на плавающих элементах :(Является ли их способ обойти это

редактировать: раствором ячейки таблицы, то h1 теряет встроенный жесткий размер Есть ли способ вокруг этого

.?

Я пробовал ширина:. авто

Answer 1

Попробуйте это:

HTML:

<div class="row"> 
    <h1 class="cell">heading</h1> 
    <nav class="cell"> 
    <ul>LIs...</ul> 
    </nav> 
</div> 

УС:

.row{display:table-row;} 
.cell{display:table-cell; 
vertical-align: middle; 
border: 1px solid #CCC;} 

Fiddle here.