如何在中间对齐几个按钮？

Question

<div class="button">

<p>
 <style>
a.button1 {
float: left;
height: 398px;
margin: 59px 0px 0px 17px;
background-image: url("i/about-button.gif");
text-indent: -9999px;
display: inline-block;
}

a#about-button {
width: 340px;
background-position: 0px 0px;}

a#about-button:hover {
background-position: 0px -796px;}

a#about-button:active {
background-position: 0px -398px;}</style>
<body>
<a href="about.html" class="button1" id="about-button" image></a>
</body>
</p>
</div>

好吧，我对此很菜鸟，请耐心等待。 我正在尝试将导航按钮对准中心。 也就是说，无论您的窗口有多宽，它们大部分都将停留在中间。 现在，它们都向左对齐。

我有一个按钮1，一个按钮2，一个按钮3和一个按钮4。 它们彼此完美对齐； 我只需要弄清楚如何使它们全部移到中心即可。 抱歉，在其他主题中我无法找到答案，这对我的代码类型有帮助。 救命！

Answer 1

您可以使用以下类似的方法将几件事情在中间对齐

在头部：

<style>
.button {
    text-align:centre;
}
.button > * {
    display:inline-block;
}
</style>

在这一点上，您想将事物居中：

<div class="button">
    <a href="about.html" class="button1" id="about-button"></a>
    <a href="contact.html" class="button2" id="contact-button"></a>
</div>

然后，这两个链接将在div button内居中对齐。 该div的所有直接子元素也将居中。

顺便说一句，您的html应该如下所示：

<html>
<head>
<style>
a.button1 {
float: left;
height: 398px;
margin: 59px 0px 0px 17px;
background-image: url("i/about-button.gif");
text-indent: -9999px;
display: inline-block;
}

a#about-button {
width: 340px;
background-position: 0px 0px;}

a#about-button:hover {
background-position: 0px -796px;}

a#about-button:active {
background-position: 0px -398px;}
</style>
</head>
<body>
<div class="button">
<p>
<a href="about.html" class="button1" id="about-button" image></a>
</p>
</div>
</body>
</html>

Answer 2

为此，您需要了解以下几点：

1. 您不能将按钮向左浮动，并希望它保持居中。
2. 您不需要<div><p><a> -额外的标记只会使事情变得复杂。
3. 为了使窗口中的text-align: center ，请设置text-align: center于body或全角元素（例如下面的div）。

您的样式，已调整：

div.button {
    text-align: center;
}

a.button1 {
    height: 398px;
    margin: 59px auto 0px auto;
    background-image: url("i/about-button.gif");
    text-indent: -9999px;
    display: inline-block;
}

a#about-button {
    width: 340px;
    background-position: 0px 0px;
}

a#about-button:hover {
    background-position: 0px -796px;
}

a#about-button:active {
    background-position: 0px -398px;
}

您的HTML只需要像这样：

<div class="button">
        <a href="about.html" class="button1" id="about-button" image></a>
</div>

编辑：既然您提到了导航按钮 ，我想我也会向您展示适用于多个链接的内容：

首先，这是HTML所需的全部：

<div class="button">
        <a href="about.html" class="button1" id="about-button"></a>
        <a href="about.html" class="button1" id="about-button"></a>
        <a href="about.html" class="button1" id="about-button"></a>
</div>

而且您需要稍微修改一下CSS的按钮，因为它的宽度和高度都很高。