Моя цель - расположить кнопки панели навигации рядом друг с другом в центре страницы следующим образом:

enter image description here

К тому же мой образ по какой-то причине не центрируется.

@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>
3
Abhiraj SB 1 Сен 2020 в 23:27

2 ответа

Лучший ответ

Вы можете использовать display: flex для заголовка и align-items, чтобы выровнять их по центру по горизонтали. и чтобы выровнять элементы навигации рядом друг с другом, вы можете дать им display: 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>

сильный текст

1
Deepak Verma 1 Сен 2020 в 20:53

Вам не хватает пары вещей. Во-первых, установите для элементов списка встроенный макет:

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

Тогда align-content не будет работать, если вы также не используете гибкий макет:

#header {
    display: flex;
    ...
}

Это приближает вас. См. https://css-tricks.com/snippets/css/ a-guide-to-flexbox, чтобы получить желаемый интервал.

0
isherwood 1 Сен 2020 в 20:33