margin:auto 和 text-align:center 不工作

Question

我正在尝试建立一个网站。出于某种原因，我的 'margin: auto' 和 'text-align: center' 属性不起作用。有人可以在 inspect element 中检查我的代码并告诉我哪里出了问题吗？

body {
  font-family: sans-serif, 'Helvetica';
  background-color: #f9f9f9;
}
.dropdown {
  position: relative;
}
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  display: block;
}
.dropdown:hover .dropdown-content {
  display: block;
}
#my_cycle_head {
  text-align: center;
}
#main_navbar {
  text-align: center;
  margin: 0 auto;
  margin-right: auto;
  margin-left: auto;
  width: 800px;
}
#main_navbar nav a {
  text-decoration: none;
  text-align: center;
}
#main_navbar nav {
  display: inline-block;
  text-align: center;
  padding-right: 20px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Cycle - Home</title>
  <link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>
  <header>
    <h1 id="my_cycle_head">My Cycle</h1>
    <navbar id="main_navbar">
      <nav><a href="#">Home</a>
      </nav>
      <nav class="dropdown">
        <a class="dropbtn">Dropdown</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </nav>
      <nav><a href="faq.html">FAQ's</a>
      </nav>
      <nav><a href="about.html">About</a>
      </nav>
    </navbar>
  </header>
</body>

</html>

Answer 1

<navbar> 不是 HTML 元素。如果你 used a validator.

无法识别的元素被放入 DOM，默认样式包括 display: inline。

自动边距和 text-align 对 display: inline.

的元素没有影响

使用正确的 HTML，使用 <nav>（默认为 display: block）。

Answer 2

请将导航栏更改为 div

<body>
  <header>
    <h1 id="my_cycle_head">My Cycle</h1>
    <div id="main_navbar">
      <nav><a href="#">Home</a>
      </nav>
      <nav class="dropdown">
        <a class="dropbtn">Dropdown</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </nav>
      <nav><a href="faq.html">FAQ's</a>
      </nav>
      <nav><a href="about.html">About</a>
      </nav>
    </div>
  </header>
</body>

工作示例：https://jsfiddle.net/Lt0y3ba1/

Answer 3

我已将您对 navbar 的使用更正为 nav，并创建了一系列 ul 并在其中列出项目以替换所有单个 nav 元素。 nav 元素是导航元素的一部分，而不是标记每个单独的导航点（在此处查看更多信息：http://html5doctor.com/nav-element/）。

我还重新排序了您的 CSS 并使用子选择器 (https://css-tricks.com/child-and-sibling-selectors/) 来防止样式从主导航栏向下滚动到下拉子菜单。在此示例中，所有文本现在都居中。

    body {
      font-family: sans-serif, 'Helvetica';
      background-color: #f9f9f9;
    }
    #my_cycle_head {
      text-align: center;
    }
    #main_navbar {
      text-align: center;
      margin: 0 auto;
      margin-right: auto;
      margin-left: auto;
      width: 800px;
    }
    #main_navbar > ul > li {
      display: inline-block;
      text-align: center;
      padding-right: 20px;
    }
    #main_navbar > ul > li > a {
      text-decoration: none;
      text-align: center;
    }
    .dropdown {
      position: relative;
    }
    .dropdown-content {
      display: none;
      padding:0;
      position: absolute;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    }
    .dropdown-content > li {
      display: block;
    }
    .dropdown:hover .dropdown-content {
      display: block;
    }

<header>
  <h1 id="my_cycle_head">My Cycle</h1>
  <nav id="main_navbar">
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li class="dropdown">
        <a class="dropbtn">Dropdown</a>
        <ul class="dropdown-content">
          <li><a href="#">Link 1</a>
          </li>
          <li><a href="#">Link 2</a>
          </li>
          <li><a href="#">Link 3</a>
          </li>
        </ul>
      </li>
      <li><a href="faq.html">FAQ's</a>
      </li>
      <li><a href="about.html">About</a>
      </li>
    </ul>
  </nav>
</header>

margin:auto 和 text-align:center 不工作

margin:auto and text-align:center are not working

html

css

margin

text-align