html - 如何在 100% 宽度的导航栏上居中对齐我的链接？

Question

我想知道如何将我的两个导航栏上的所有链接居中对齐。 (一个在顶部，一个在底部)。我试过 text-align 代码，但由于某种原因它不起作用。请你帮我解决这个问题。

由于某些原因我无法发布代码示例，因此请访问此链接查看源代码:http://www.hgcarpentryandjoinery.com/mxjgtv/Index.html

Answer 1

下面是一个简单的工作示例:

ul {
 list-style: none;
 margin: 0;
 padding-left: 0;
}

nav {
  background: black;
  display: flex;
  justify-content: center;
  height: 30px;
  width: 100%;
}

nav ul {
 display: flex;
 align-items: center;
}

<nav>
  <ul>
    <li><a>HOME</a></li>
  <li><a href="Videos.html">VIDEOS</a></li>
  <li><a href="Results.html">RESULTS</a></li>
  <li><a href="Tumblr.html">TUMBLR</a></li>
</li>
  </ul>
</nav>

其他要点:

• 不要将您的元素包裹在标签中。标签已弃用:https://caniuse.com/#search=center
• 开始学习 flexbox 来构建您的布局:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• 使用标签而不是标签来包裹导航，通过添加语义帮助搜索引擎正确抓取您的网站:http://html5doctor.com/nav-element/