html - 导航栏中的垂直居中菜单

Question

我在这个问题上苦苦挣扎了一个多小时，但无法解决问题，我知道这些是基础知识，但谷歌的解决方案都没有帮助，我不明白问题出在哪里。我得到了那个导航栏，我想将 Logo 垂直居中并在其中列出元素:

        <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% 时，为什么它指的是整个主体而不是导航元素？

Answer 1

注意 - 类名不同。从现有样式中删除:#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;
}