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

4

2 回答 2

1

You can align several things together in the middle by using something like this

In the Head:

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

And at the point you want to centre the things:

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

And that will place those two links centre aligned together within the div button. All direct child elements of that div will be centred too.

By the way, your html should look like:

<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>
于 2012-11-28T21:39:27.240 回答
0

为了做到这一点，您需要了解几件事：

  1. 您不能将按钮向左浮动，并期望它保持居中。
  2. 你不需要<div><p><a>- 额外的标记只会让事情变得复杂。
  3. 为了使窗口中的某些内容居中，请在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，因为它非常宽和高。

于 2012-11-28T21:42:04.357 回答