导航栏和图像居中问题
问题描述:
作为学校项目的一部分,我尝试创建我的第一个网页。但是,当我在顶部栏中放置徽标并居中放置徽标时,我的导航栏向下移动,导致此问题停滞不前。我想知道有没有人可以帮忙?导航栏和图像居中问题
JS小提琴:https://jsfiddle.net/3k65c20u/
这里是我的代码:
#header {
height: 200px;
width: 100%;
background-color: black;
}
#top-bar {
background-repeat: repeat-x;
position: absolute;
left: 0;
width: 100%;
height: 200px;
padding: 0px;
margin: 0px;
}
//Top Navigation Bar//
.navigation-bar {
background-color: black;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 250px;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.navigation-bar ul {
padding: 210px;
margin: 0px;
text-align: center;
}
.navigation-bar li {
list-style-type: none;
padding: 8px;
height: 24px;
margin-top: 30px;
margin-bottom: 4px;
display: inline;
}
.navigation-bar li a {
color: gray;
background-color: black;
font-size: 13px;
text-transform: uppercase;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
box-shadow: 0px;
border-radius: 3px;
padding-right: 1em;
padding-left: 1em;
line-height: 2em;
margin-right: 16px;
}
.navigation-bar li:first-child {
margin-left: 20px;
border: #C00;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="feistybite.css">
<div id="header">
<div id="top-bar"></div>
<div class="navigation-bar">
<img src="strikerlogo.png" class="center">
<div id="navigation-container" class="cf">
<ul>
<li><a href="#">Miten se toimii</a>
</li>
<li><a href="#">Osta</a>
</li>
<li><a href="#">Tarina</a>
</li>
<li><a href="#">Meistä</a>
</li>
<li><a href="#">Uutisia</a>
</li>
</ul>
</div>
</div>
</head>
<body>
</body>
</html>
答
不知道你想达到什么样的设计,但我只是改变了导航栏位置,相对的,图像为绝对,所以...设置为左侧50%,并使用CSS属性transform: translateX(-50%);
图像终于居中
答
改变CSS中ul
到,除去padding:210px;
.navigation-bar ul {
margin: 0px;
text-align:center;
}
这个伟大的工程,谢谢! – ECheibaa