Блог

Главная - Вопросы по программированию - Как я могу выровнять навигационные кнопки рядом друг с другом в середине страницы с моим изображением в центре?

Как я могу выровнять навигационные кнопки рядом друг с другом в середине страницы с моим изображением в центре?

#html #css #nav

#HTML #css #навигация

Вопрос:

Моя цель — расположить кнопки навигационной панели рядом друг с другом в центре страницы вот так :

введите описание изображения здесь

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

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

Ответ №1:

вы можете использовать display: flex для заголовка и align-items, чтобы выровнять их по горизонтали в центре. и чтобы выровнять ваши элементы навигации рядом друг с другом, вы можете предоставить им отображение: встроенный блок;

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

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

Ответ №2:

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

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

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

 #header {
    display: flex;
    ...
}

Это приближает вас. Обратитесь к https://css-tricks.com/snippets/css/a-guide-to-flexbox за помощью в получении интервала, как вы этого хотите.