Html 我如何对齐中间的几个按钮？_Html_Css_Button_Alignment

Html 我如何对齐中间的几个按钮？

html css button

Html 我如何对齐中间的几个按钮？,html,css,button,alignment,Html,Css,Button,Alignment,a、按钮1{ 浮动：左；高度：398px；保证金：59px 0px 0px 17px；背景图片：url（“i/about button.gif”）；文本缩进：-9999px；显示：内联块； } 关于按钮{ 宽度：340px；背景位置：0px 0px；} 关于按钮：悬停{ 背景位置：0px-796px；} a#关于按钮：激活{ 背景位置：0px-398px；} 好吧，我是个笨蛋，所以请容忍我。我正试图将我的导航按钮对准正中央。也就是说，无论你的窗户有多宽，它们大部分都会停留在中间

a、按钮1{ 浮动：左；高度：398px；保证金：59px 0px 0px 17px；背景图片：url（“i/about button.gif”）；文本缩进：-9999px；显示：内联块； } 关于按钮{ 宽度：340px；背景位置：0px 0px；} 关于按钮：悬停{ 背景位置：0px-796px；} a#关于按钮：激活{ 背景位置：0px-398px；}

好吧，我是个笨蛋，所以请容忍我。我正试图将我的导航按钮对准正中央。也就是说，无论你的窗户有多宽，它们大部分都会停留在中间。现在，它们都向左对齐

我有一个按钮1，一个按钮2，一个按钮3和一个按钮4。它们彼此完全对齐；我只需要想办法让它们都移到中心。

很抱歉，我在其他主题中找不到对我的代码类型有帮助的答案。救命啊

> P>你可以用类似的东西把中间的东西排列在一起。在头部：

<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>

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

不能将按钮向左浮动，并期望它保持居中

您不需要

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

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

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

你需要为你的按钮稍微修改你的css，因为它又宽又高

哎呀，这个HTML很古怪。在走这么远之前。。你真的应该通过一些新手教程来学习。

中不应该有

body

标签，也不应该有

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>

<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>

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;
}

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

<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>