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

【问题标题】：How do I center align my links on the 100% width navigation bars?如何在 100% 宽度的导航栏上居中对齐我的链接？
【发布时间】：2019-03-27 23:12:50
【问题描述】：

我想知道如何将我的两个导航栏上的所有链接居中对齐。（一个在顶部，一个在底部）。我已经尝试了文本对齐代码，但由于某种原因它不起作用。请你帮我解决这个问题。

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

【问题讨论】：

标签： html css navigation navbar center

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

【讨论】：

谢谢你的作品。但是链接都太靠近导航栏边框的顶部。
我只是试图解决您的主要问题，即在中心对齐内容。要调整对齐方式，请在
父元素的子元素上使用 padding / line-height。

【解决方案2】：

对于第一个导航栏，删除float 属性并添加text-align:center

.navbar a {
   text-align: center;  //<---------------add this 
    display: inline;
    color: grey;
    text-align: center;
    padding: 16px;
    box-sizing: border-box;
    text-decoration: none;
    font-family: helvetica;
    font-size: 17px;
    font-weight: bold;
}

对于底部的第二个导航，只需添加 text-align 属性

  <div style="width: 100%; height: 30px;text-align: center;">
  <a href="http://www.hgcarpentryandjoinery.com/">HG CARPENTRY</a>
  <a href="Allrightsreserved.html">ALL RIGHTS RESERVED</a>
  <a href="PrivacyPolicy.Terms.html">TERMS & CONDITIONS</a>
  <a href="PrivacyPolicy.html">PRIVACY POLICY</a>
   </div>

【讨论】：