不使用position属性，如何将按钮对齐到表格单元格底部？

可以通过给包含按钮的单元格设置Flex布局来实现，既能让按钮固定在单元格底部，又能保留按钮的align属性、margin以及单元格的padding功能，完全不需要position:relative。

修改后的代码 #

CSS #

.t {
  width: 100%;
  border: 1px solid black;
}

td {
  text-align: center;
  border: 1px solid red;
  height: 50px;
  padding: 8px; /* 保留单元格padding示例 */
}

td:has(button) {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

button {
  display: inline-block;
  margin-top: auto; /* 关键：将按钮推到单元格底部 */
  margin-left: auto;
  margin-right: auto; /* 保持按钮水平居中，对应text-align的效果 */
}

label {
  display: inline-block;
  margin-bottom: 4px; /* 示例：给label设置margin */
}

HTML #

<table class="t">
  <tr>
    <th>first</th>
    <th>sec</th>
    <th>third</th>
  </tr>
  <tr>
    <td>cell1</td>
    <td>
      <button>btn</button>
    </td>
    <td>
       Cell2
    </td>
  </tr>
  <tr>
    <td>cell1</td>
    <td>
      <label>Cell1</label>
      <button>btn</button>
    </td>
    <td>
       Cell2
    </td>
  </tr>
</table>

原理说明 #

• 给包含按钮的td设置display: flex和flex-direction: column，让单元格内元素垂直排列
• 按钮的margin-top: auto会自动占据单元格内剩余的垂直空间，把按钮推到底部位置
• 通过margin-left: auto和margin-right: auto保持按钮水平居中，完全替代原来的text-align: center效果；如果需要左对齐或右对齐，直接调整这两个margin值即可
• 单元格的padding、按钮的margin都能正常生效，完全满足你的需求

内容的提问来源于stack exchange，提问作者bn 41