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>

好的，我这是一个菜鸟，所以请耐心等待。我试图将我的导航按钮对准中心。也就是说，无论你的窗户有多宽，它们都会在大多数情况下保持在中间位置。现在，它们都向左对齐。

我有a.button1，a.button2，a.button3和a.button4。它们彼此完全一致;我只需要弄清楚如何让它们全部移动到中心。抱歉，我无法在其他主题中找到答案，这些主题可以帮助我处理我的代码。帮助！

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

为了做到这一点，您需要了解以下几点：

您不能将按钮向左浮动，并希望它保持居中。
您不需要<div><p><a> - 额外的标记只会让事情变得复杂。
为了在窗口中居中，请在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>

你需要稍微修改你的按钮，因为它非常宽大。

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

2 个答案: