Question

我试图将顶层菜单垂直居中而不指定像margin-top: 50px;这样的值，因为我的一些朋友说这不是理想的方法。

/* 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

删除float:right上的.menu，并将.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%;
}

工作原理：

设置text-align: justify;会将两个内部内联块对齐到容器的左右边缘。
使用:after或:before伪元素拉伸框来占据整个容器空间，从而创建一个不可见的100％宽度元素。否则，内联元素仅占用由定义内联元素的标记限定的空间。

Answer 2

这里的一个简单方法是使用Flexbox：

.nav-contain {
    /* what is already there */
    display: flex;
    align-items: center;
}

小心浏览器支持（请查看caniuse.com以了解您是否可以接受兼容级别。）

这优于margin-top解决方案，因为它确保每次图像大小或导航栏中的任何其他内容发生变化时，您不必手动更改50px。

Answer 3

尝试：

.menu > ul > li {
    min-height:50px;
    display: table;
}
.menu > ul > li > a {
    display: table-cell;
    vertical-align: middle;
}

http://jsfiddle.net/rawat/4h05rq2s/

Answer 4

由于您的导航栏始终保持相同的高度，我建议您为.nav-contain提供以下代码：

.nav-contain {
    width: 1100px;
    margin: 0 auto;
    line-height: 184px;
    padding: 0;
    overflow: hidden;
}

注意行高。这样，一旦你缩小了设备的可用宽度，就会产生一个看起来不那么好看的巨大导航栏。为此，我建议媒体查询。

如何使顶部导航垂直居中与徽标？

4 个答案: