Question

作为学校项目的一部分，我正在尝试创建我的第一个网页。然而，当我在顶部栏中放置一个徽标并使其居中时，我的导航栏会向下移动这个问题。我想知道是否有人可以提供帮助？

这是我的代码：

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

Answer 1

不确定你想要实现什么样的设计，但我只是将导航栏位置更改为相对，并将图像更改为绝对，所以...将左侧设置为50％并使用CSS属性transform: translateX(-50%);图像为终于集中了

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

Answer 2

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

Answer 3

将ul中的css更改为，删除padding:210px;

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

导航栏和图像居中的问题

3 个答案: