为何<td>内的HTML按钮添加图片后会丢失垂直对齐效果？

我原本使用仅包含文本的按钮，此时<td>内按钮的垂直对齐是正常的（对应Code-1）。但当我在按钮中添加图片后，按钮的对齐效果丢失，<td>高度变高，按钮靠底部对齐。问题出在哪里？

原代码 #

CSS #

.td_button_bar {
  background-color: #eaf2f8;
  border: none;
  left: 10px;
}

.button {
  width: 75px;
  height: 50px;
  background-color: #eaf2f8;
  border: 1px solid;
  border-color: #aed6f1;
  display: inline-block;
  font-size: 13px;
  border-radius: 5px 5px 5px 5px;
  color: #212f3c;
  padding-top: 10px;
}

HTML #

<!-- Code-1 垂直对齐正常 -->
<table>
  <tr class="tr_button_bar">
    <td class="td_button_bar" align="left" valign="middle">
      &nbsp;<button class="button">Connect</button> &nbsp;
      <button class="button">Disconnect</button>
    </td>
  </tr>
</table>

<!-- Code-2 垂直对齐异常 -->
<table>
  <tr class="tr_button_bar">
    <td class="td_button_bar" align="left" valign="middle">
      &nbsp;<button class="button"><img src="https://w7.pngwing.com/pngs/923/71/png-transparent-computer-icons-connect-miscellaneous-angle-technology-thumbnail.png" width="20" height="20" align="middle">Connect</button> &nbsp;
      <button class="button"><img src="https://w7.pngwing.com/pngs/627/934/png-transparent-computer-icons-electrical-connector-ac-power-plugs-and-sockets-plug-in-connect-miscellaneous-computer-program-electrical-connector-thumbnail.png" width="20" height="20" align="middle">Disconnect</button>
    </td>
  </tr>
</table>

问题原因 #

1. 按钮设置了padding-top:10px，但图片作为行内元素默认跟文本基线对齐，导致内部元素整体偏移，视觉上按钮重心下移，同时撑开了<td>的高度。
2. 用的align="middle"是过时的HTML属性，对现代布局的控制精度不足，解决不了图片和文本的对齐冲突。
3. .td_button_bar的left:10px无效，因为left仅对设置了定位（如position:relative）的元素生效，TD是常规块级元素，该属性无法控制边距。

解决方案 #

改用Flex布局实现按钮内部元素的精准居中，同时修正无效的CSS属性：

修改后的CSS #

.td_button_bar {
  background-color: #eaf2f8;
  border: none;
  padding-left: 10px; /* 替换无效的left属性，用内边距控制左侧间距 */
}

.button {
  width: 75px;
  height: 50px;
  background-color: #eaf2f8;
  border: 1px solid #aed6f1;
  display: inline-flex; /* 保持行内排列同时启用Flex布局 */
  align-items: center; /* 垂直居中内部元素 */
  justify-content: center; /* 水平居中内部元素 */
  gap: 4px; /* 图片与文本的间距，可按需调整 */
  font-size: 13px;
  border-radius: 5px;
  color: #212f3c;
  padding: 0; /* 移除原padding-top，用Flex布局控制居中 */
}

.button img {
  width: 20px;
  height: 20px;
  /* 移除HTML中的align属性，用CSS统一控制 */
}

修改后的HTML #

<!-- 修复后的Code-1（统一布局逻辑） -->
<table>
  <tr class="tr_button_bar">
    <td class="td_button_bar" align="left" valign="middle">
      &nbsp;<button class="button">Connect</button> &nbsp;
      <button class="button">Disconnect</button>
    </td>
  </tr>
</table>

<!-- 修复后的Code-2 -->
<table>
  <tr class="tr_button_bar">
    <td class="td_button_bar" align="left" valign="middle">
      &nbsp;<button class="button"><img src="https://w7.pngwing.com/pngs/923/71/png-transparent-computer-icons-connect-miscellaneous-angle-technology-thumbnail.png">Connect</button> &nbsp;
      <button class="button"><img src="https://w7.pngwing.com/pngs/627/934/png-transparent-computer-icons-electrical-connector-ac-power-plugs-and-sockets-plug-in-connect-miscellaneous-computer-program-electrical-connector-thumbnail.png">Disconnect</button>
    </td>
  </tr>
</table>

补充说明 #

• inline-flex既保留了按钮的行内排列特性，又能通过Flex布局轻松实现内部元素的垂直/水平居中，彻底解决图片和文本的对齐问题。
• 移除padding-top后，按钮内部元素的位置由Flex布局精准控制，不会再出现偏移导致<td>高度异常的情况。
• gap属性可以优化图片和文本的间距，提升视觉体验，可根据实际需求调整数值。

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