html - 为什么我的按钮不对齐？

Question

出于某种原因，我的按钮无法水平对齐...我不明白哪里出了问题。我的按钮都是内联 block 。第一张图片显示了一个带有按钮的网站，第二张图片是一个没有按钮的网站，只是为了让您明白我在说什么。非常感谢:)。

我的 HTML:

<center>
<div id="menu"> 
    <form>
        <input class="MyButton" type="button" value="About us" onclick="F:\practice website's\About us.html">
    </form>
    <form>
        <input class="MyButton" type="button" value="Events" onclick="F:\practice website's\About us.html">
    </form>
    <form>
        <input class="MyButton" type="button" value="Sign up" onclick="F:\practice website's\About us.html">
    </form>
    <form>
        <input class="MyButton" type="button" value="Volunteer" onclick="F:\practice website's\About us.html">
    </form>
    <form>
        <input class="MyButton" type="button" value="Contact" onclick="F:\practice website's\About us.html">
    </form>
</div>

我的 CSS:

a:link{
        text-decoration: none;
        color: rgba(250,250,250,0.5);
    }
    a:visited{
        text-decoration: none;
        color: rgba(250,250,250,0.5);
    }
    input.MyButton {
        display: inline-block;
        width: 80px;
        height: 20px;
        font-weight: bold;
        background: rgba(0,0,0,0.5);
        color: rgba(250,250,250,0.5);
        cursor: pointer;
        border-radius: 10px;
        border: none;
    }
    #menu{
        display: inline-block;
    }

This is how it appears

This is how it should appear

Answer 1

严重的是，不要使用输入元素和 JavaScript 来实现使用普通 anchor 标记可以实现的功能。

a:link {
  text-decoration: none;
  color: rgba(250, 250, 250, 0.5);
}
a:visited {
  text-decoration: none;
  color: rgba(250, 250, 250, 0.5);
}
#menu a {
  display: inline-block;
  width: 80px;
  height: 20px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(250, 250, 250, 0.5);
  border-radius: 10px;
  border: none;
  text-align:center;
  padding: 5px;
}
#menu {
  width: 100%;
  text-align: center;
}

<div id="menu">
  <a href="about_us.html">About us</a>
  <a href="sign_up.html">Sign up</a>
  <a href="events.html">Events</a>
  <a href="volunteer.html">Volunteer</a>
  <a href="contact.html">Contact</a>
</div>

此外，正如 Paulie_D 所述，<center>标签已被弃用。您可以像我在示例 (div#menu) 中所做的那样使用 CSS 将元素居中。