如何强制超过一行的图像图标和跨度文本使第一行与图像图标对齐？答案

【问题标题】：How to force an image icon and span text which is longer than one line have the 1st line aligned with the image icon?如何强制超过一行的图像图标和跨度文本使第一行与图像图标对齐？
【发布时间】：2019-10-18 00:44:18
【问题描述】：

当跨度文本超过一行时，它不会与图像图标正确对齐。我怎样才能做到这一点？

目前，如果图像和跨度文本出现在一行中，则其对齐正确。

我尝试了以下方法：

<table>
  <tr>
    <TD>
      <INPUT type=text id="item_name" name=item_namelength=25 maxlength=100 value="<%=item_name%>" onchange="verifyItemInfo()">
      <TD><span id="signalSrc">
    <img  align="top" src="../images/warning.png"></span> </TD>
      <TD><span class=dfb9 id="ajaxGetItems" style="color: #ff0000;  
    display: inline-block;">There is a really long text which goes to the 
    next line and then the alignment doesnt work</span> </TD>
  </TR>
</table>

【问题讨论】：

你到底想达到什么目标？
基本上，当我们在文本框中输入内容时，它会对后端进行 ajax 调用并向用户显示一条消息以及一个图像图标，显示的消息可以是一行或两行视情况而定。因此，图像图标应与跨度文本的第一行对齐
你最好完全放弃桌子，做一些更像这样的事情：codepen.io/misterManSam/pen/ZEEpxYz

标签： html css html-table

【解决方案1】：

如果我猜对了您需要什么，则“未对齐”可能是由于内容为 vertical-align: middle。要解决此问题，您可以尝试根据需要添加 line-height 和 vertical-align: top。

tr {
  line-height: 20px;
  vertical-align: top;
}

<table>
  <tr>
    <TD>
      <INPUT type=text id="item_name" name=item_namelength=25 maxlength=100 value="<%=item_name%>" onchange="verifyItemInfo()">
      <TD><span id="signalSrc">
    <img  align="top" src="https://via.placeholder.com/20"></span> </TD>
      <TD><span class=dfb9 id="ajaxGetItems" style="color: #ff0000;  
    display: inline-block;">There is a really long text which goes to the 
    next line and then the alignment doesnt work. Long Long Long Long Long Long Long</span> </TD>
  </TR>
</table>

【讨论】：