我正在努力解决这个问题超过一个小时并且无法做到正确,我知道这些是基础知识,但谷歌没有任何解决方案帮助,我不明白这是什么问题。我有了导航栏,我想垂直居中标识并列出其中的元素:
<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元素?
答案 0 :(得分:0)
由于您的“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>
块元素的垂直间距可能有点棘手,因为它们从未被设置为以这种方式运行。所以总是需要一些技巧。
答案 1 :(得分:0)
你可以通过使列表和徽标的位置相对来使它们居中,而不是给它们50%的顶部和负边距以及它们的高度的一半。所以只需将这些属性添加到现有属性中:
.logo {
position: relative;
top: 50%;
margin-top: -25px;
}
#menu {
position: relative;
top: 50%;
margin-top: -10px;
}
答案 2 :(得分:0)
注意 - 班级名称不同。从您现有的样式中删除:#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;
}
答案 3 :(得分:0)
使用它:
#mainMenu {
height: 80px;
width: 100%;
background-color: #F00;
position: fixed;
line-height: 80px; /* added */
}
#menu {
float: right;
margin-right: 16%;
display: inline-block; /* added */
}