如何调整表格td标签内的图片使其与相邻文本保持相同高度

你遇到的图标和文本错位问题，本质是行内级的img元素默认和文本基线对齐导致的，可通过以下两种方案解决：

方案1：改动最小的快速实现 #

直接给所有td内的img标签添加vertical-align: middle属性，即可让图片和文本中线对齐，还可以加少量右边距避免图标和文字贴太近，修改后的完整代码如下：

<table style="border-bottom: 0px solid #ddd; margin-top: 20px;">
  <tr>
    <td id="instagram">
      <a href="https://www.instagram.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/instagram-social-media-camera-photo_icon-icons.com_59107.png" alt="Instagram" width="15%" style="vertical-align: middle;margin-right: 6px;" /></a> Instagram</td>
    <td id="facebook">
      <a href="https://www.facebook.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/facebook-letter-social-media-f_icon-icons.com_59105.png" alt="Facebook" width="15%" style="vertical-align: middle;margin-right: 6px;" /></a> Facebook</td>
    <td id="twitter">
      <a href="https://www.twitter.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/twitter-bird-animal-social-media_icon-icons.com_59106.png" alt="Twitter" width="15%" style="vertical-align: middle;margin-right: 6px;" /></a> Twitter</td>
    <td id="youtube">
      <a href="https://www.youtube.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/youtube-video-social-media-play_icon-icons.com_59108.png" alt="Youtube" width="15%" style="vertical-align: middle;margin-right: 6px;" /></a> Youtube</td>
  </tr>
  <tr>
    <td id="tinytext" colspan="4"> Follow for more </td>
  </tr>
</table>

方案2：flex布局更稳定可控 #

如果后续需要调整单元格内的布局，推荐给td设置flex布局，对齐逻辑更直观，不会因为字体大小、行高变化出现错位，示例代码如下：

<!-- 只需要给td添加style即可，内部元素不需要额外加属性 -->
<table style="border-bottom: 0px solid #ddd; margin-top: 20px;">
  <tr>
    <td id="instagram" style="display: flex;align-items: center;gap: 6px;">
      <a href="https://www.instagram.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/instagram-social-media-camera-photo_icon-icons.com_59107.png" alt="Instagram" width="15%" /></a> Instagram
    </td>
    <td id="facebook" style="display: flex;align-items: center;gap: 6px;">
      <a href="https://www.facebook.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/facebook-letter-social-media-f_icon-icons.com_59105.png" alt="Facebook" width="15%" /></a> Facebook
    </td>
    <td id="twitter" style="display: flex;align-items: center;gap: 6px;">
      <a href="https://www.twitter.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/twitter-bird-animal-social-media_icon-icons.com_59106.png" alt="Twitter" width="15%" /></a> Twitter
    </td>
    <td id="youtube" style="display: flex;align-items: center;gap: 6px;">
      <a href="https://www.youtube.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/youtube-video-social-media-play_icon-icons.com_59108.png" alt="Youtube" width="15%" /></a> Youtube
    </td>
  </tr>
  <tr>
    <td id="tinytext" colspan="4"> Follow for more </td>
  </tr>
</table>

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