我在设置导航时遇到问题。我希望导航能够居中,徽标位于网站中间。在调整浏览器大小后,我希望我的4个链接在徽标下面流动。但是,我在导航中心方面遇到了麻烦。我对媒体查询有点了解,但我之前没有尝试过这么复杂的东西。谁能给我一些指示?
<div id="container">
<nav>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Creative</a></li>
<li id="Logo"><a href="#"><img src="ThisIMAGE.jpg" width="462"/></a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
#container {width:100%; padding: 0; position: relative; margin: 0 auto;}
nav {
max-width:1328px;
margin:0 auto;
position:relative;
padding:0;
}
nav ul {
margin:0 auto;
}
nav ul li {
list-style:none;
float:left;
padding-top:18%;
}
nav ul li a {
color: #949c50;
font-family: 'Source Sans Pro', sans-serif;
font-size:1em;
line-height:1.25em;
text-align:center;
text-decoration: none;
display:block;
padding-right:2em;
padding-left:2em;
margin:0;
}
nav ul li a:hover {
color: #a6449a;
}
#Logo {
z-index:999;
width: 462px;
padding-right:8%;
padding-left:0; padding-top:0; padding-bottom:0;
margin:0;
}
答案 0 :(得分:1)
您可以使用以下内容:
@media (max-width: 850px){
#container{
width: 680px;
}
nav{
position: relative;
top: 100px;
}
li#logo{
position: absolute;
top: 0;
left: 50%;
margin-top: -50px;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
}
答案 1 :(得分:0)
不确定我是否完全理解你的要求,但是我尽最大努力去做我认为你想要的事情
要集中精力,我只是简单地使用了
<center>
your code...
</center>
答案 2 :(得分:0)
我添加了媒体查询以解决您的问题。
<强> HTML 强>
<div id="container">
<nav>
<a href="#"><img src="http://goo.gl/JwDJac"/></a>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Creative</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
<强> CSS 强>
#container {
width: 100%;
padding: 0;
margin: 0 auto;
margin: 0 auto;
overflow: hidden;
text-align: center;
}
nav {
max-width: 1328px;
margin: 0 auto;
position: relative;
padding:0;
height: 200px;
}
nav ul {
margin: 0 auto;
padding: 0;
}
nav ul li {
display: inline-block;
list-style: none;
padding-top: 75px;
}
nav ul li a {
color: #949c50;
font-family:'Source Sans Pro', sans-serif;
font-size:1em;
line-height:1.25em;
text-align:center;
text-decoration: none;
display: block;
padding-right: 1.5em;
padding-left: 1.5em;
margin: 0;
}
nav li:nth-child(2){
padding-right: 100px;
}
nav ul li a:hover {
color: #a6449a;
}
img {
width: 150px;
position: absolute;
margin-left: -75px; /* Center the img */
}
@media screen and (max-width: 768px){
img{
position: relative;
margin-left: 0px;
}
nav{
height: auto;
}
nav ul li{
padding-top: 15px;
}
nav li:nth-child(2){
padding-right: 0;
}
}
<强> jsfiddle 强>