时间戳

首页 > 解决方案 > 固定和中心导航栏

html - 固定和中心导航栏

问题描述

我正在尝试制作一个显示宽度为 70% 的固定中心导航栏。当我将位置更改为固定时，它总是移动到左侧大小。

body {
  background-color: black;
}

.navbar,
main {
  width: 70%;
  margin: 0 auto;
}

.navbar {
  position: fixed;
  background: #1a1c1b;
  padding: 5px 0;
}
<header>
  <nav class="navbar">
    <div class="logo-box">
      <a href="index.html" class="logo">MOVIES</a>
    </div>

    <div class="search-box">
      <form action="https://www.google.com/search" method="get">
        <input id="seach-bar" name="q" type="search" placeholder="Search MOVIES" autocomplete="off">
        <button id="search-button" type="submit" class="search">Search</button>
      </form>
    </div>

    <div class="nav-links">
      <ul>
        <li><a href="#" class="links">Genres</a></li>
        <li><a href="#" class="links">Celebs</a></li>
        <li><a href="#" class="links">My List</a></li>
      </ul>
    </div>
  </nav>
</header>

标签： htmlcssnavbar

解决方案

使用弹性盒子！

将标题设置为具有属性的flexbox以在水平轴上居中对齐导航栏。justify-content

header {
  display: flex;
  justify-content: center;
}

推荐阅读