如何通过CSS实现文本区域旁span、文本与图片的居中对齐及交互优化

直接上修改后的代码，完美满足你的两个需求：

修改后的HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table>
  <tr>
    <td style="display: flex; align-items: center; gap: 4px;">
      <textarea cols="50" rows="5" id="bigT" name="bigT"></textarea>
      <span class="fg_Erase" onclick="document.getElementById('bigT').value = ''">✘</span>
      <img src="images/info.png" class="fg_alignImg" id="info" name="info">
    </td>
  </tr>
</table>

修改后的CSS代码 #

.fg_Erase {
  color: #880;
  margin-left: -12px;
  user-select: none; /* 防止点击时误选文本 */
}

.fg_Erase:hover,
.fg_alignImg:hover {
  cursor: pointer;
}

.fg_alignImg {
  /* 可根据需求调整图片尺寸 */
  width: 16px;
  height: 16px;
}

关键调整说明 #

• 给表格单元格添加align-items: center，配合display: flex直接实现所有元素垂直居中，无需额外调整间距
• 用<span>替代button作为清除按钮，信息按钮直接用<img>，彻底消除button默认样式和高度带来的光标范围问题
• 仅给叉号文本（fg_Erase）和信息图标（fg_alignImg）设置cursor: pointer，确保只有可点击区域才显示指针光标
• 给叉号span添加user-select: none，避免点击时不小心选中文本
• 修正了原代码中jQuery选择器的错误（原$('bigT')应为$('#bigT')，这里改用原生JS更简洁）

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