无法在导航栏列表中居中导航栏列表项

Question

这是我的标题的外观：

如您所见，黄色框不在红色框的中心。怎样才能把它放在中心？

我的代码片段如下：

Header.js

import React from "react";

const Header = () => {
  return (
    <header>
      <nav>
        <ul className="navbar-list">
          <li className="navbar-list-item">Register/Login</li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;

index.css 以下是我完整的 index.css 代码。我没有任何其他 CSS 文件。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

header {
  width: 100%;
  height: 6rem;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border: 0.3rem solid green;
}

nav {
  margin-right: 3rem;
  border: 0.1rem solid red;
}

.navbar-list {
  list-style: none;
  border: 0.1rem solid gold;
}

.navbar-list-item {
  color: gainsboro;
  font-size: 1.6rem;
  cursor: pointer;
}

GIT 存储库

https://github.com/sundaray/book

Answer 1

试试这个方法。此外，您从 bootstrap 设置了 margin-bottom ，需要覆盖

nav{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
}

Answer 2

给你的导航设置一个 50 像素的高度。

现在将其添加到您的 .navbar-list：

margin: 0; position: relative; top: 50%; transform: translate(0, -50%);

这实质上抵消了元素的顶部定位，然后将其向上移动了自身高度的 50%，使其垂直居中。