Question

下面的代码工作正常，但过去的工作方式与纯文本不同。我正在尝试在Email部分（代码的最后一列）中添加vertical-align：top，但是它不起作用..我需要帮助。请找到以下代码，让我知道该怎么做！

代码：



<table style="width:330px;">
  <tbody>
    <tr>
      <td
        style="text-align:  center;font-size:8pt;border-right:2px solid rgb(211,211,211);"
      >
        <img
          height="15"
          src="/SigEditorHelper/GetEImage?ImgName=LocationPin_Icon.png"
          width="15"
        /><br />
        <span style="font-size:8pt;"
          >P.O.Box 31279<br />
          Jeddah,21497<br />
          Saudi Arabia</span
        >
      </td>
      <td
        style="text-align:  center;font-size:8pt; width:100px;border-right:2px solid rgb(211,211,211);"
      >
        <span style="font-size:8pt;"
          ><img
            height="15"
            src="/SigEditorHelper/GetEImage?ImgName=Phone_Icon.png"
            width="15"
          /><br />
          M (!Mobile!)<br />
          T (!Phone!)</span
        >
      </td>
      <td style="text-align:  center;font-size:9pt; ">
        <img
          height="15"
          src="/SigEditorHelper/GetEImage?ImgName=email_icon.JPG"
          width="15"
        /><br />
        (!Email!)<br />

      </td>
    </tr>
  </tbody>
</table>

Answer 1

在代码中的任何地方似乎都没有vertical-align: top;。如果只想在email列中使用它，则可以对该td元素进行内联样式。

<td style="vertical-align: top;">....

如果希望他们所有人都拥有它，只需对所有td元素使用CSS。

td { 
   vertical-align: top;
}

td {
  vertical-align: top;
}

<table style="width:330px;">
  <tbody>
<tr>
  <td style="width:165px;">
    <img src="/SigEditorHelper/GetEImage?ImgName=100.jpg" />
  </td>
  <td style="width:165px; text-align:  center;">
    <span style="font-weight:bold; font-size:14pt;">(!DisplayName!)</span
    ><br />
    <span style="color:gray;font-size:12pt;">(!Position!)</span>
  </td>
</tr>
<tr>
  <td
    colspan="2"
    style="font-size:10pt;color:black;border-bottom:2px solid rgb(211,211,211);width:330px;"
  >
    Naseej International Trading Company (NITC).<br />
    Saudi Listed Entity,TASI:1213
  </td>
</tr>
<tr></tr>
  </tbody>
</table>

<table style="width:330px;">
  <tbody>
<tr>
  <td
    style="text-align:  center;font-size:8pt;border-right:2px solid rgb(211,211,211);"
  >
    <img
      height="15"
      src="/SigEditorHelper/GetEImage?ImgName=LocationPin_Icon.png"
      width="15"
    /><br />
    <span style="font-size:8pt;"
      >P.O.Box 31279<br />
      Jeddah,21497<br />
      Saudi Arabia</span
    >
  </td>
  <td
    style="text-align:  center;font-size:8pt; width:100px;border-right:2px solid rgb(211,211,211);"
  >
    <span style="font-size:8pt;"
      ><img
        height="15"
        src="/SigEditorHelper/GetEImage?ImgName=Phone_Icon.png"
        width="15"
      /><br />
      M (!Mobile!)<br />
      T (!Phone!)</span
    >
  </td>
  <td style="text-align:  center;font-size:9pt; ">
    <img
      height="15"
      src="/SigEditorHelper/GetEImage?ImgName=email_icon.JPG"
      width="15px"
    /><br />
    (!Email!)<br />
    WWW.Nassejco.com
  </td>
</tr>
  </tbody>
</table>

Answer 2

<td style="text-align:  center;font-size:9pt; line-height: 0; vertical-align:top;">
    <img
      height="15"
      src="/SigEditorHelper/GetEImage?ImgName=email_icon.JPG"
      width="15"
    /><br />
    (!Email!)<br />

  </td>

尝试一下

垂直对齐不适用于纯文本吗？

2 个答案: