我无法弄清楚如何在 CSS 中将导航栏居中答案

【问题标题】：I cannot figure out how to center my nav bar in css我无法弄清楚如何在 CSS 中将导航栏居中
【发布时间】：2019-02-05 12:43:58
【问题描述】：

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

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 已编辑以添加来自屏幕截图的代码 - 我相信第三个屏幕截图结合代码和标题为这个问题提供了足够的信息。

【问题讨论】：

您应该直接在此处插入代码，而不是发布屏幕截图。创建一个 sn-p 供人们调试。每个人都更容易。
尝试使用flexbox

标签： html css web formatting nav

【解决方案1】：

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

其次，看起来您根本没有尝试将任何内容置于中心位置。您的导航栏位于右侧floating，margin-right 为 600 像素，这意味着它将与窗口右侧保持 600 像素的距离。

尝试添加这个：

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

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

【讨论】：

谢谢，我是这个网站和编码的新手。下次我会确保复制并粘贴我的代码，您的回答也有帮助。

【解决方案2】：

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

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

另外请从 .main-nav{}

中删除 float:right

【讨论】：

【解决方案3】：

这里有一些东西：

别忘了关闭你的 div 和 ul 标签！
为 .row 添加这个：

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

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

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

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

通过删除浮动和左边距允许 display:flex 完成它的工作。

【讨论】：