我如何将这些按钮并排放置在页面的中心？答案

【问题标题】：How Would I Put These Buttons Side by Side and At the Center of my Page?我如何将这些按钮并排放置在页面的中心？
【发布时间】：2022-08-02 15:24:08
【问题描述】：

我是 HTML 和 CSS 的新手，我需要帮助将两个 LinkedIn 按钮并排放置。它们现在是垂直对齐的，但我不知道如何将它们并排放置在一起。我计划在未来添加更多，可能会增加 3 或 4 个，但我还不确定。我尝试将按钮中的显示更改为内联，但这对我不起作用。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  min-height: 100vh;
  background: #782F40;
  transition: 3s;
}

h1 {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.title {
  font-size: 130px;
  color: #FAF9F6;
  font-weight: 700;
}

.subtitle {
  color: white;
  font-size: 80px;
}

button {
  margin: 3px auto;
  display: block;
  background-color: transparent;
  color: #FAF9F6;
  width: 70px;
  height: 70px;
  border: 5px solid white;
  font-size: 25px;
  border-radius: 50px;
  transition: transform .6s;
  overflow: hidden;
}

button:hover {
  color: white;
  cursor: pointer;
  transform: scale(1.03);
}

#particles-js {
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-image: url(\'\');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

<!DOCTYPE html>
<html lang=\"en\">

<head>
  <meta charset=\"UTF-8\">
  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
  <meta http-equiv=\"Cache-Control\" content=\"no-cache, no-store, must-revalidate\" />
  <meta http-equiv=\"expires\" content=\"timestamp\">
  <title>Name</title>
  <link rel=\"stylesheet\" href=\"styles.css\">
  <script src=\"https://kit.fontawesome.com/4ce3863cee.js\" crossorigin=\"anonymous\"></script>


</head>

<body>


  <div class=\"container\">
    <div class=\"header\">
      <h1>
        <span class=\"title\">Name</span><br>
        <span class=\"subtitle\">CS @ FSU</span>
      </h1>
    </div>
    <div class=\"btn\">
      <form>
        <button type=\"submit\" formaction=\"https://www.google.com/\">
          <i class=\"fa-brands fa-linkedin\">
        </i></button>
      </form>
      <form>

        <button type=\"submit\" formaction=\"https://www.google.com/>
          <i class=\" fa-brands fa-linkedin \"></i>
        </button>
      </form> 
    </div>
  </div>

<div id=\"particles-js \"></div>    

<script type=\"text/javascript \" src=\"particles.js \"></script>
<script type=\"text/javascript \" src=\"app.js \"></script>
</body>
</html>

将它们放在容器 (div) 中。容器可以是display:flex或者按钮可以有float:left。我猜flex 更容易
他没有嵌套它们。他们一个接一个。这很令人困惑。
@DavidThomas 嗨，对此感到抱歉。我是 HTML 和 CSS 的新手，我正在观看有关如何制作按钮的 YouTube 视频，我认为复制和粘贴带有按钮的表单就是包含多个按钮的方式。
@ITgoldman：他是这样的；谢谢你的纠正。朱利安，我很抱歉，这是我的错误。

标签： html css

【解决方案1】：

将它们放在容器 (div) 中。容器可以是 display:flex 或者按钮可以是 float:left。我猜flex更容易。

注意：我给你做了一个 sn-p，因为你的 HTML 有一些问题。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  min-height: 100vh;
  background: #782F40;
  transition: 3s;
}

h1 {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.title {
  font-size: 130px;
  color: #FAF9F6;
  font-weight: 700;
}

.subtitle {
  color: white;
  font-size: 80px;
}

button {
  margin: 3px auto;
  display: block;
  background-color: transparent;
  color: #FAF9F6;
  width: 70px;
  height: 70px;
  border: 5px solid white;
  font-size: 25px;
  border-radius: 50px;
  transition: transform .6s;
  overflow: hidden;
}

button:hover {
  color: white;
  cursor: pointer;
  transform: scale(1.03);
}

#particles-js {
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.buttons-container {
  display: flex;
  margin: auto;
  width: 300px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="expires" content="timestamp">
  <title>Name</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://kit.fontawesome.com/4ce3863cee.js" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <div class="header">
      <h1>
        <span class="title">Name</span><br>
        <span class="subtitle">CS @ FSU</span>
      </h1>
    </div>
    <div class="btn">
      <form>
        <div class="buttons-container">
          <button type="submit" formaction="https://www.google.com/">
                        <i class="fa-brands fa-linkedin"></i>
                    </button>

          <button type="submit" formaction="https://www.google.com/">
                        <i class="fa-brands fa-linkedin"></i>
                    </button>
        </div>
      </form>
    </div>
  </div>

  <div id="particles-js"></div>

  <script type="text/javascript" src="particles.js"></script>
  <script type="text/javascript" src="app.js"></script>
</body>

</html>

【讨论】：

嗨，这对我有帮助。如果您不介意我问，我的 HTML 有什么问题？
不，对不起，是我的错。您的 HTML 现在看起来不错。所以请注意我用按钮周围的<forms> 改变了一些东西。你想让我恢复那个吗？它可能会稍微影响解决方案，因为flex 容器将仅对齐其直接子级。
没有这个解决方案完美地工作。我看了一个关于如何制作按钮的 YouTube 视频，他们为他们制作的每个按钮都包含了表单标签，所以我真的不明白它是如何工作的，但谢谢。

【解决方案2】：

你可以很容易地使用 Bootstrap 来做到这一点，但如果你不想使用它，有几种不同的方法。我可以给其中之一。您可以在样式部分添加此代码。

div {
    display: flex;
}

此代码会影响所有 div，但您可以使用 id 或 class 来防止这种情况。

【讨论】：

【解决方案3】：

我会使用 flexbox 或创建一个 <ul>

对于 flexbox，将它们包装在 <div class="btn"> 中，并在 css 中将按钮设置为 display: flex;

【讨论】：