Question

我正在努力解决这个问题超过一个小时并且无法做到正确，我知道这些是基础知识，但谷歌没有任何解决方案帮助，我不明白这是什么问题。我有了导航栏，我想垂直居中标识并列出其中的元素：

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

@edit：

当我把margin-top：50％用于#menu为什么它引用整个身体而不是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。以下是代码示例 - ＆gt; 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  */
}

导航栏中的垂直中心菜单

4 个答案: