无法使用span/div对齐社交按钮

<div class="social-buttons">
  <span class="button">按钮1</span>
  <span class="button">按钮2</span>
  <span class="button">按钮3</span>
</div>

.social-buttons {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}

.button {
  margin: 5px; /* 按钮之间的间距 */
}

<div class="social-buttons">
  <span class="button">按钮1</span>
  <span class="button">按钮2</span>
  <span class="button">按钮3</span>
</div>

.social-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 将容器划分为3列 */
  justify-items: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}

.button {
  margin: 5px; /* 按钮之间的间距 */
}

<table class="social-buttons">
  <tr>
    <td><span class="button">按钮1</span></td>
    <td><span class="button">按钮2</span></td>
    <td><span class="button">按钮3</span></td>
  </tr>
</table>

.social-buttons {
  width: 100%; /* 表格宽度占满容器 */
  table-layout: fixed; /* 固定表格布局 */
  text-align: center; /* 按钮水平居中对齐 */
}

.button {
  margin: 5px; /* 按钮之间的间距 */
}