我不知道如何将我的导航栏居中 css

Question

非常感谢任何帮助，谢谢！

Here is my html code

<!DOCTYPE html>
<html>
<head>
  <title>Elliott Lambert</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

  <header>
      <div class="row">
        <ul class="main-nav">
          <li class="active"><a href="">HOME</a></li>
          <li><a href="">ABOUT</a></li>
          <li><a href="">EXPERIENCE</a></li>
          <li><a href="">ACKNOWLEDGEMENTS</a></li>
          <li><a href="">CONTACT</a></li>
          <li><a href="">FAQs</a></li>
        </ul>
      </div>
  </header>

</body>
</html>

Here is my css code

.main-nav
{
  float: right;
  list-style: none;
  margin-top: 30px;
  margin-right: 600px;
}

.main-nav li
{
  display: inline-block;
  list-style-type: none;
  text-align: center;
}

.main-nav li a
{
  display: inline-block;
  color: black;
  text-decoration: none;
  padding: 5px 20px;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
}

Here is what my index.html looks like now

@jvdmr 编辑以从屏幕截图中添加代码 - 我相信第三张屏幕截图结合代码和标题为这个问题提供了足够的信息。

Answer 1

仔细查看您所附的图片后，我编写了以下代码。希望这对你有帮助。

.row{text-align:center; width:100%; display:inline-block;}

另外请从 .main-nav{}

中删除 float:right

Answer 2

这里有些东西：

别忘了关闭您的 div 和 ul 标签！
将此添加到 .row:

.行{ 显示：-webkit-flex；显示：弹性； -webkit-flex-方向：行；弹性方向：行； -webkit-justify-content：居中；证明内容：居中；对齐内容：拉伸； }

这允许您的 .row 充当整个页面的容器，子项位于容器的中心。

将您的 .main-nav{} 替换为以下内容：

.main-nav{ 列表样式：none；顶部边距：30px； }

通过删除浮动和左边距，您可以让 display:flex 完成它的工作。

Answer 3

首先：请将您的代码放在您的问题中，而不是屏幕截图中，这样可以方便人们在需要时进行复制和测试。

其次，您似乎根本没有尝试将任何东西居中。您的导航栏 float 向右，margin-right 为 600px，这意味着它将与 window.

的右侧保持 600px 的距离

尝试添加这个：

.main-nav {
  margin: 30px auto auto;
  list-type: none;
  width: intrinsic;
}

而不是 style.css 中的当前 .main-nav 条目。保持 style.css 的其余部分不变。

我不知道如何将我的导航栏居中 css

I cannot figure out how to center my nav bar in css

html

css

formatting

nav

web