边距：自动和文本对齐：中心不起作用答案

【问题标题】：margin:auto and text-align:center are not working边距：自动和文本对齐：中心不起作用
【发布时间】：2016-07-12 02:05:10
【问题描述】：

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

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>

【问题讨论】：

标签： html css margin text-align

【解决方案1】：

我已将您对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>

【讨论】：

【解决方案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/

【讨论】：

谢谢你，但我只是用
替换了 nabber 并在里面做了一个
。

【解决方案3】：

<navbar> 不是 HTML 元素。如果你有used a validator，就会被选中。

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

自动边距和text-align 对display: inline 的元素没有影响。

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

【讨论】：

是否有可能使 text-align 产生影响？