html - HTML表格对齐图像和文本

Question

在示例文章中，我添加了一个包含 2 列的 html 表格，左列用于图像，右列用于图像描述。

问题是，右栏中的文本描述在图像下方，就像图像迫使文本分成另一行一样。

这是我使用的示例代码：

<table>
<tr>
<td>Image.jpg</td>
<td>Image.jpg description</td>
</tr>
<tr>
<td>Image2.jpg</td>
<td>Image2.jpg description</td>
</tr>
</table>

您可以在此页面上看到问题

Answer 1

你只需要添加style="vertical-align:top"到td

或者vertical-align:middle，如果您想将文本放置在行的中间

Answer 2

在文本中试试这个 CSS <TD>：

vertical-align:top;

IE：

<td style="vertical-align:top;">
   Trio: Quaisquer três cartas do mesmo valor. Este exemplo ...
</td>

Answer 3

因此，要了解您希望照片和文字正确对齐吗？您可以使用 valign 属性吗？

<table>
<tr>
 <td valign="top">January</td>
 <td valign="top">$100</td>
</tr>
<tr> 
<td valign="bottom">February</td>
 <td valign="bottom">$80</td>
   </tr>
</table>

顶部、底部和中心应根据您希望的对齐方式使用。