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

标签 html css nav

我的目标是让我的导航栏按钮像这样在页面中央彼此相邻:

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>

最佳答案

您可以使用 display: flex 作为标题,使用 align-items 将它们水平居中对齐。并使您的导航项彼此相邻对齐,您可以给它们显示:内联 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>

强文本

关于html - 如何将页面中间相邻的导航按钮与中心的图像对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63695005/

相关文章:

html - 下拉导航被嵌入的 YouTube 视频阻止

css - 如何将自定义形状或背景添加到当前菜单项的底部

html - 我应该在我的代码中更改什么,以便当我指向菜单时,悬停正好覆盖所有导航栏

javascript - HTML/CSS - 导航栏拉伸(stretch)/填充背景颜色

php - 来自同一单选按钮组的值数组

html - Flex - 具有相同高度的并排子容器

html - CSS :before pseudo element + twitter bootstrap navbar logo

html - 如何创建与输入文本框完全一样的跨度

php - 2 列中 float /内联 block 元素的间隙问题

html - iOS 如何让背景看起来随时间改变亮度?