如何对齐中间的几个按钮？答案

【问题标题】：How do I align several buttons in the middle?如何对齐中间的几个按钮？
【发布时间】：2012-11-16 21:05:18
【问题描述】：

<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。它们彼此完美对齐；我只需要弄清楚如何让它们都移动到中心。抱歉，但我无法在其他主题中找到对我的代码有帮助的答案。帮助！

【问题讨论】：

eeek，这个 HTML 很古怪。甚至在走到这一步之前......你真的应该通过几个新手教程来运行。 p 中不应该有 body 标签，也不应该有 style 等。还有很多其他奇怪的东西......

标签： html css button alignment

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

【讨论】：

【解决方案2】：

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

您不能将按钮向左浮动，并期望它保持居中。
您不需要<div><p><a> - 额外的标记只会让事情变得复杂。
为了使窗口居中，在body 上设置text-align: center，或者设置一个全角元素（例如下面的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，因为它非常宽和高。

【讨论】：

非常感谢你们两位！这成功了！我正在上编程课，我的项目下周就要到期了，我还有很长的路要走！这真的让我很开心！非常感谢！！！