嘿，我怎么把这个按钮放在中间？答案

【问题标题】：Hey how would I put this button in the center?嘿，我怎么把这个按钮放在中间？
【发布时间】：2021-07-14 05:54:22
【问题描述】：

[我的网站图片1

嘿，如果你看到那张图片，那么我只是想知道如何将按钮放在中间，就像标题一样。就像直接在它下面一样，text-align 对我不起作用。

如果我的代码中有任何内容阻止按钮进入中心，请告诉我。（我是 HTML 新手）

我的代码：

<html style = "background-color: lightblue;">
<b
  ><h1 id="chimp">
    Welcome to Monkey Idle!
  </h1></b
>
<a class="button" href="" style="text-decoration: none; color: black" id = "button">
  Click Here to Play!
</a>
<a id="button2" class="button" href="" style="text-decoration: none; color: black;">
  Played before? Click here!
</a>
<style>
  #chimp {
    text-align: center;
    font-size: 50px;
    font-family: cursive;
  }
  #moneycount {
    border-style: solid;
  }
  #button2 {
  text-align: center;
  background color;
    position:absolute;
    left: 50%;
    font-family: cursive;
    background-color: white;
    padding: 20px;
    position: center;
    align: center;

  }
  @keyframes buttonbounce {
    0%{margin-left: 0px;}
    100%{margin-left: 10px;}
  }
  #button2:hover {
        animation: buttonbounce 0.1s infinite;
  }
  #button {
      text-align: center;
  background color;
    position:relative;
    
    font-family: cursive;
    background-color: white;
    padding: 20px;

  }
</style>
</html>

【问题讨论】：

研究一下

标签： html css button center html-helper

【解决方案1】：

text-align 不适用于按钮的原因是按钮不被视为文本。当您使用 text-align 时，您将在父元素中居中文本，而不一定是页面的中心。例如，按钮上的文本对齐只会将文本居中在按钮的中心。如果要使按钮居中，可以将按钮包装在 div 中，并使用Flexbox。如果您刚开始 Web 开发，我强烈推荐前面提到的 Flexbox 以及用于页面布局的 CSS Grid。

#button-wrapper {
  display: flex;
  justify-content: center;
}

<div id="button-wrapper">
  <button>My button!</button>
</div>

【讨论】：

嘿，我还有一个问题，当我这样做时，它会使背景颜色的宽度变得很长。当我改变宽度时，它会回到左边。我该如何解决？
在我提供的示例中，父 div (#button-wrapper) 将横跨屏幕的宽度。只需将 #button-wrapper 上的样式更改为您想要的任何背景颜色，这样它看起来就不会存在。
对不起，我还是不明白。介意发布一个例子吗？
我无法发布另一个示例作为评论，我需要做出另一个回应。欢迎您提出另一个问题，但对您来说最重要的是阅读更多文档、观看视频或参加有关该主题的在线课程。我可以从您分享的代码中看出您是新人，这完全没问题，但是您编写了很多 CSS 来实现非常少量的样式。你写的 CSS 越多，样式相互干扰就越多，初学者调试起来会很困难。
这是我开始学习 CSS 时上的一门很棒的课程：freecodecamp.org/learn/responsive-web-design