Вертикально выровнять плавающие DIVs

Question

У меня есть часть веб-сайта, которую я создаю, которая выглядит следующим образом:

<div id="topbar">
    <div id="topbar_left">
        <form action="Search" method="POST">
            <label for="searchtext">Find Products: </label><input type="text" name="searchtext" id="searchtext" size="30" />
            <input type="submit" value="Search" />
        </form>
    </div>
    <div id="topbar_right">
        You are logged in as Username &bull; <a href="LogOut">Log Out</a>
    </div>
    <div class="clear"></div>
</div>

Я бы хотел, чтобы текст в topbar_right был вертикально центрирован по отношению к тексту в topbar_left .Тем не менее, topbar_right не всегда содержит текст, он также может содержать небольшую форму, которая отображается нормально, поскольку она имеет ту же высоту, что и слева.

Вот мойтекущий CSS:

#topbar {
    background-color: #5a87bf;
    padding: 10px 30px 10px 30px;
    margin-bottom: 10px;
    font-size: 9pt;
}
#topbar_left {
    float: left;
}
#topbar_right {
    float: right;
}
.clear {
    clear: both;
}

Как лучше всего добиться этого?

Answer 1

Я обычно нахожу, что установка высоты строки помогает здесь. что-то вроде этого может работать:

#topbar_left, #topbar_right {
  line-height: 20px;
}

Вы также можете попробовать поиграться с CSS-свойством vertical-align . Прочитайте эту статью о том, как правильно ее использовать

удачи