html - 在 div 中将链接居中

Question

我已经尝试了关于堆栈溢出的所有其他想法，但没有任何东西对我有用 - 所以我开始认为我错过了一些愚蠢的东西。我想要做的就是将一个链接标记放在一个 div 标记的中心。我试过做左右自动边距，以及文本对齐等。你看到我忽略的错误了吗？链接位于一个 id 为 header 的 div 中。

#header a{
  font-size: 25px;
  color: black;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
  line-height: 75px;
  text-align: center;
}

<ul id="menu">
    <li class="menuItem"><a href="home.html">Home</a></li>
    <li class="menuItem"><a href="music.html">Music</a></li>
    <li class="menuItem"><a href="services.=html">Services</a></li>
    <li class="menuItem"><a href="contact.html">Contact</a></li>
    <li class="menuItem"><a href="bio.html">Bio</a></li>
</ul>

Answer 1

问题是 ul 在对齐元素方面有自己的想法。参见 this thread关于以 div 为中心的 ul。

要摆脱 ul 标签的默认填充和边距，请尝试:

#menu {
    text-align: center;
    margin: 0;
    padding: 0;
}

然后，如果您想要水平并排显示链接，则必须更改 li 标签的默认行为，例如如下所示:

.menuItem {
    display: inline-block;
}