Question

我建立了这个网站，我无法在中间获得导航栏或我的图像。我尝试了很多像制作柔性盒子，设置边距，......我只是找不到问题。我希望这不是一个问题，你看不到图片等，因为它看起来很乱。

以下是我的代码的一部分：

body {
  background-color: #333333;
}

.navBar {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #9D9C9C;
  opacity: 0.8;
  width: 95%;
  position: fixed;
  align-items: center;
}

.logo {
  width: 200px;
}

ul {
  list-style-type: none;
  width: 40%;
  white-space: nowrap;
}

a {
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 10px;
}

.voorPagina {
  width: 95%;
}

<!DOCTYPE html>
<html>

<head>
  <title>Dia architecten</title>
</head>

<body>

  <div class="navBar">
    <img class="logo" src="/Images/LogoDIA.png" />
    <ul>
      <a href="#Projecten">Projecten</a>
      <a href="#Over">Over</a>
      <a href="#Contact">Contact</a>
    </ul>
  </div>

  <img class="voorPagina" src="Images/VPDia.png" />

</body>

</html>

谢谢！

Answer 1

这样的东西？

您使用justify-content: space-between;作为.navBar类的div，而不是justify-content: center;，它会将div的所有子元素集中在一起！我还添加了一个占位符图像用于检查目的！

注意： 请点击链接full page查看正确的居中导航栏！

＆＃13;

body {
  background-color: #333333;
}

.navBar {
  display: flex;
  justify-content: center;
  padding: 10px;
  background-color: #9D9C9C;
  opacity: 0.8;
  width: 95%;
  position: fixed;
  align-items: center;
}

.logo {
  width: 200px;
}

ul {
  list-style-type: none;
  width: 40%;
  white-space: nowrap;
}

a {
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 10px;
}

.voorPagina {
  width: 95%;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Dia architecten</title>
</head>

<body>

  <div class="navBar">
    <img class="logo" src="http://lorempixel.com/100/25/" />
    <ul>
      <a href="#Projecten">Projecten</a>
      <a href="#Over">Over</a>
      <a href="#Contact">Contact</a>
    </ul>
  </div>

  <img class="voorPagina" src="Images/VPDia.png" />

</body>

</html>

＆＃13;

HTML将我的对象放在网页上（导航栏，图像）

1 个答案: