导航栏中的垂直中心菜单

Question

我在这个问题上苦苦挣扎了一个多小时，无法解决问题，我知道这些都是基础知识，但是Google的解决方案都没有帮助，我不明白这是什么问题。 我得到了导航栏，我想将徽标和其中的元素垂直居中：

        <nav id="mainMenu">
        <a href="http://creativecorner.pl"><img class="logo" src="images/logo.png" alt="logo" /></a>

        <ul id="menu">
            <li>Home</li>
            <li>About me</li>
            <li>Portfolio</li>
            <li>Contact</li>

        </ul>
    </nav>

CSS： http ： //klaunfizia.pl/damian/style.css

这是演示： http : //klaunfizia.pl/damian/

@编辑：

当我为#menu设置margin-top：50％时，为什么它指的是整个身体而不是nav元素？

Answer 1

由于您的“ nav”元素是固定的，请尝试将您的“ ul”元素包装在div中，然后将边距的css设置为所需的距离。

<div style="margin-top:20px">
    <ul id="menu">
        <li>Home</li>
        <li>About me</li>
        <li>Portfolio</li>
        <li>Contact</li>
    </ul>
</div>

块元素的垂直间距可能有些棘手，因为它们从来没有打算那样做。 因此，总是需要一些技巧。

Answer 2

您可以通过使列表和徽标的位置相对而将它们居中居中，而不是给它们顶部50％的高度和一半高度的负边距。 因此，只需将这些属性添加到现有属性中即可：

.logo {
    position: relative;
    top: 50%;
    margin-top: -25px;
}

#menu {
    position: relative;
    top: 50%;
    margin-top: -10px;
}

Answer 3

注意-类名不同。 从您现有的样式中，删除：#mainmenu，#menu和#menu li。 这是一个示例代码-> DEMO

这是您的新html：

<ul class="nav"> <a href="http://creativecorner.pl"><img class="logo" src="images/logo.png" alt="logo" /></a>

<li><a href="/">Home</a>

</li>
<li><a href="/about/">About me</a>

</li>
<li><a href="/work/">Portfolio</a>

</li>
<li><a href="/clients/">Contact</a>

</li>

这是您的新CSS：

.nav {
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    background-color:red;
}
.nav li {
    display:inline;
}
.nav a {
    display:inline-block;
    padding:10px;
    text-decoration: none;
    color: #000000;
}

Answer 4

用这个：

#mainMenu {
height: 80px;
width: 100%;
background-color: #F00;
position: fixed;
line-height: 80px;  /*  added  */
}

#menu {
float: right;
margin-right: 16%;
display: inline-block;  /*  added  */
}