如何实现页面内按钮并排显示且整体居中布局？

问题描述 #

我是HTML和CSS新手，需要将两个LinkedIn按钮设置为并排显示，目前按钮垂直排列。尝试修改button的display属性为inline但未生效，未来可能还要新增3-4个按钮。当前效果如下：

附上当前代码：

CSS代码

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

HTML代码

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

问题原因 #

1. 每个按钮被包裹在独立的<form>标签中，<form>默认是块级元素，会占据整行空间，导致按钮垂直排列。
2. 按钮本身设置了display: block和margin: 3px auto，强制按钮成为块级元素并居中，进一步加剧了垂直排列的问题。

解决方案（Flexbox 实现，推荐） #

Flexbox是现代布局方案，灵活且易于扩展，适合未来新增按钮的需求。只需修改以下CSS：

1. 给.btn容器添加Flex布局属性：

.btn {
  display: flex;
  justify-content: center; /* 按钮水平居中 */
  gap: 10px; /* 按钮之间的间距，可按需调整 */
  flex-wrap: wrap; /* 按钮过多时自动换行 */
}

2. 修改按钮的样式，移除display: block和margin: 3px auto，保留上下间距：

button {
  margin: 3px 0; /* 仅保留上下间距 */
  /* 移除原来的 display: block 和 margin: 3px auto */
  background-color: transparent;
  color: #FAF9F6;
  width: 70px;
  height: 70px;
  border: 5px solid white;
  font-size: 25px;
  border-radius: 50px;
  transition: transform .6s;
  overflow: hidden;
}

修改后的完整CSS代码 #

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

/* 新增.btn容器样式 */
.btn {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

button {
  margin: 3px 0;
  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;
}

效果说明 #

• 按钮会水平并排显示，且保持居中。
• 通过gap属性可灵活调整按钮间距。
• 新增按钮时，flex-wrap: wrap会自动让按钮在空间不足时换行，适配不同屏幕尺寸。

内容的提问来源于stack exchange，提问作者Julian Sanchez