Html 垂直对齐的菜单项

在我的页面上，我有一个带有徽标的导航栏，几个项目和右侧对齐的登录部分

<div id="topbar">
    <nav>
        <ul>
            <li>
                <a ui-sref="home" class="home-logo">
                    <img src="http://placehold.it/350x150">
                </a>
            </li>
            <li> <a href="#">Item1</a></li>
            <li> <a href="#">Item2</a></li>
            <li> <a href="#">Item3</a></li>
        </ul>
        <ul>
            <li> <a href="#">Log In</a></li>
            <li>
                <a href="/Login">Sign up for free</a>
            </li>
        </ul>
    </nav>
</div> 

我试图使这个登录部分与其余的菜单元素在同一高度上对齐，但浮动会使这些项目脱离正常流程，我不知道如何实现这一点

---

这就是我要说的：

习惯于像这样的

线条高度

#topbar li
    {
      line-height:150px;
    }

ul
{
列表样式：无；
}
#顶栏
{
字号：1.75em；
}
#顶杆
{
填充：0；
显示：内联块；
}
#顶杆img
{
垂直对齐：中间对齐；
右边距：60px；
}
#顶杆李
{
显示：内联块；
右边距：60px；
线高：150px；
}
#topbar ul：最后一个孩子
{
填充：0；
浮动：对；
}

谢谢！我的标志有固定的高度，所以这是一个很好的解决方案。我不知道为什么这么简单的事情我想不起来。