如何解决按钮无法在span标签内居中的问题？

问题根源 #

1. HTML结构不合法：<tr>的直接子元素只能是<th>或<td>，你直接把<div>放在<tr>里，浏览器会自动修正DOM结构，导致布局和样式完全不符合预期。
2. 样式作用对象错误：text-align: center是用来让容器内的行内/行内块元素水平居中，你把这个样式加在按钮本身，只会让按钮内部的文字居中，而非按钮在父容器里居中。

修复方案 #

步骤1：修正HTML结构

把包含按钮的<div>和<span>放到<td>标签内，保证表格结构合法：

<html>
<body>
Inventory Page
<table>
  <tr>
    <th>Last modified Date</th>
    <td>
      <div>
        <span>
          <button> test </button>
        </span>
      </div>
    </td>
  </tr>
  <tr>
    <td>Modified by</td>
  </tr>
  <tr>
    <td>Name</td>
  </tr>
</table>
</body>
</html>

步骤2：设置正确的居中样式

给包含按钮的容器添加text-align: center样式，让按钮在容器内水平居中：

/* 给span设置居中，需将span转为块级元素以占满父容器宽度 */
span {
  text-align: center;
  display: block;
}

/* 或者直接给外层td设置居中，更简洁 */
td:last-child {
  text-align: center;
}

简化方案 #

如果不需要<div>和<span>的额外样式，可直接简化结构，把按钮放在<td>里并设置居中：

<tr>
  <th>Last modified Date</th>
  <td style="text-align: center;">
    <button> test </button>
  </td>
</tr>

内容的提问来源于stack exchange，提问作者Abhishek Sharma