如何将页面中间相邻的导航按钮与中心的图像对齐？

Question

我的目标是让我的导航栏按钮在页面中央彼此相邻，如下所示：

另外，由于某种原因，我的图像没有居中。

@font-face {
  src: url(font/BebasNeue-Regular.ttf);
  font-family: "Bebas Neue";
}

body {
  background-color: #eeeeee;
  font-family: 'Bebas Neue', cursive;
}

li {
  list-style-type: none;
  padding: 0%;
  margin: 0%;
}

#header {
  align-content: center;
}

#nav-bar {
  position: fixed;
  top: 0;
  width: 100%;
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: inline-block;
}

<header id="header">
  <img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
  <nav id="nav-bar">
    <ul>
      <li><a href="#About" class="nav-link">About</a></li>
      <li><a href="#Work" class="nav-link">How it works</a></li>
      <li><a href="#Pricing" class="nav-link">Pricing</a></li>
    </ul>
  </nav>
</header>
<section id="About">
  <iframe src="https://youtu.be/ISZLTJH5lYg" frameborder="0" title="Video about Multi-Vitamins" allowfullscreen></iframe>
</section>
<section id="work"></section>
<section id="Pricing"></section>
<form id="form" action=" https://www.freecodecamp.com/email-submit">
  <input name="email" id="email" type="email" placeholder="enter your email here" required />
  <input name="submit" id="submit" type="submit" />
</form>

Answer 1

您遗漏了几件事。首先，将列表项设置为内联布局：

li {
    ...
    display: inline-block;
}

那么，align-content 不起作用，除非你也使用 flex 布局：

#header {
    display: flex;
    ...
}

这让你很接近。请参阅 https://css-tricks.com/snippets/css/a-guide-to-flexbox 以获取所需的间距帮助。

Answer 2

您可以使用 display: flex 作为页眉，并使用 align-items 将它们水平居中对齐。并使您的导航项彼此相邻对齐，您可以给它们显示：inline-block;

@font-face {
  src: url(font/BebasNeue-Regular.ttf);
  font-family: "Bebas Neue";
}
body {
  background-color: #eeeeee;
  font-family: 'Bebas Neue', cursive;
}
li {
  list-style-type: none;
  display: inline-block;
}
ul{
  padding:0;
}
#header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#nav-bar{
  color: #f2f2f2;
  text-decoration: none;
  font-size: 17px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="plp.css" />
    <title>Multi-Vitamins</title>
  </head>
  <body>
    <header id="header">
       <img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
      <nav id="nav-bar">
        <ul>
          <li><a href="#About" class="nav-link">About</a></li>
          <li><a href="#Work" class="nav-link">How it works</a></li>
          <li><a href="#Pricing" class="nav-link">Pricing</a></li>
        </ul>
      </nav>
     
      <div></div>
    </header>
    <section id="About">
      <iframe
        src="https://youtu.be/ISZLTJH5lYg"
        frameborder="0"
        title="Video about Multi-Vitamins"
        allowfullscreen
      ></iframe>
    </section>
    <section id="work"></section>
    <section id="Pricing"></section>
    <form id="form" action=" https://www.freecodecamp.com/email-submit">
      <input
        name="email"
        id="email"
        type="email"
        placeholder="enter your email here"
        required
      />
      <input name="submit" id="submit" type="submit" />
    </form>
  </body>
</html>

强文本

如何将页面中间相邻的导航按钮与中心的图像对齐？

How can I align nav buttons next to each other in middle of the page with my image in the centre?

html

css

nav