html - 如何使顶部导航与 Logo 垂直居中？

Question

我试图使顶部菜单垂直居中，而不分配像 margin-top: 50px; 这样的值，因为我的一些 friend 说这不是理想的方法。

/* Nav Section   */
 .nav {
    width: 100%;
    padding: 0;
    margin: 0;
}
.nav-contain {
    width: 1100px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}
.logo {
    z-index: 10;
    display: inline-block;
    background: #2980B9;
    padding: 65px 50px 35px 45px;
    font-size: 36px;
    line-height: 42px;
    color: #fff;
    text-align: center;
}
.logo a {
    color: #FFFFFF;
    text-decoration: none;
}
#medical {
    display: block;
    text-transform: uppercase;
}
.menu {
    padding: 0;
    margin: 0;
    float: right;
    display: table-cell;
    position: relative;
}
.menu a {
    text-decoration: none;
    color: #505050;
    font-weight: bold;
}
.menu ul {
    padding: 0;
    margin: 0;
    float: left;
    top: 50%;
}
.menu ul ul {
    padding: 0;
    margin: 0;
}
.menu ul li {
    float: left;
    display: block;
    margin-left: 45px;
}
.menu ul ul {
    position: absolute;
    left: -999px;
}
.menu ul li:hover ul {
    left: auto;
}
.menu ul li ul li {
    margin-left: 0;
    float: none;
    margin-top: 15px;
}

<div class="nav">
    <div class="nav-contain">
        <div class="logo">
            <a href="#"><span id="medical">Medical</span><span id="company"> Company</span></a>
        </div>
        <!-- Logo -->
        <div class="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a>
                    <ul class="dropdown">
                        <li><a href="#">Sample</a></li>
                        <li><a href="#">Sample</a></li>
                    </ul>
                </li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Prices</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
        <!-- Menu -->
    </div>
    <!-- Nav Contain -->
</div>
<!-- Nav -->

Answer 1

删除 .menu 上的 float:right，并将 .logo 和 .menu 设置为:

.logo, .menu {
    display: inline-block;
    vertical-align: middle;
}

如果您需要 .menu 保持在最右侧，请添加以下内容:

.nav-contain {
    text-align: justify; 
}
.nav-contain:after{
    content: '';
    display: inline-block;
    width: 100%;
}

它是如何工作的:

1. 设置 text-align: justify; 会将两个内部内联 block 与容器的左右边缘对齐。

2. 使用 :after 或 :before 伪元素拉伸(stretch)框以占据容器的整个空间，创建不可见的 100% 宽度元素。否则，内联元素仅占用定义内联元素的标记所包围的空间。