Элемент Div не выравнивается по середине другого элемента Div

Question

Это моя соответствующая разметка страницы:

<div id="header">
    <div id="logo">
        <a href="/">Home</a>
    </div>
    <div id="user_box">
        test
    </div>
</div>

И мой соответствующий CSS:

#header {
    width: 960px;
    height: 110px;
}

#logo {
    background: url('/assets/img/logo.png') no-repeat center;
    width: 300px;
    height: 110px;
    float: left;
}


#user_box {
    width: 300px;
    height: 60px;
    float: right;
    vertical-align: middle;
}

Теперь я хочу поместить user_box div в вертикальную серединуheader дел.После долгих поисков и экспериментов с Google я понял, что это нелегко.Очевидно, я не могу выровнять вертикальный элемент блока, такой как div.Поэтому я ищу другой способ сделать это.

Я видел хакерский метод display: table; и пытался его использовать, но он ничего не изменил.Также попытался изменить элемент на встроенный элемент, например span, но это тоже не сработало.Я даже пытался использовать margin: auto 0; по какой-то ужасной причине, и это тоже не сработало.

Поэтому я прошу помощи.Как мне выровнять этот div внутри моего заголовка div?

Спасибо!

Answer 1

вертикальное выравнивание не работает с divs для выравнивания элементов в таблицах.В вашем случае вы можете просто использовать это

    #user_box { margin-top:25px; } /*110-60 = 50/2 = 25*/

Answer 2

Итак, я немного повозился с вашим кодом, и вот что я получил: http://jsfiddle.net/3k8XE/

Как вы можете видеть, я использую таблицу в качестве заголовка и применяю один и тот же идентификатор к каждомуЭлемент, за исключением двух внутренних DIVs изменились на тд.Я добавил внутреннее значение td, чтобы компенсировать расстояние между двумя элементами div, так как они изначально были установлены как float: left / right.

(Конечно, границы просто показывают, что здесь происходит на самом деле.)

Answer 3

Установить высоту строки user_box равной высоте header

Рабочая демоверсия: http://jsfiddle.net/AlienWebguy/pyppD/