导航栏和图像居中问题

作为学校项目的一部分，我尝试创建我的第一个网页。但是，当我在顶部栏中放置徽标并居中放置徽标时，我的导航栏向下移动，导致此问题停滞不前。我想知道有没有人可以帮忙？导航栏和图像居中问题

这里是我的代码：

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

来源

2017-02-15 ECheibaa

不知道你想达到什么样的设计，但我只是改变了导航栏位置，相对的，图像为绝对，所以...设置为左侧50％，并使用CSS属性transform: translateX(-50%);图像终于居中

https://jsfiddle.net/3k65c20u/1/

来源

2017-02-15 13:38:16

删除padding: 210px在.navigation-bar ul规则！

来源

2017-02-15 13:40:12 Anfuca

这个伟大的工程，谢谢！ – ECheibaa

改变CSS中ul到，除去padding:210px;

.navigation-bar ul { 
    margin: 0px; 
    text-align:center; 
}

来源

2017-02-15 13:50:40

导航栏和图像居中问题

回答

相关问题