HTML表格对齐图片和文本。

Question

在一个示例文章中，我添加了一个包含两列的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>

你可以在这个页面看到问题。

- Ricardo Ribeiro

Answer 1

您只需要在 td 中添加 style="vertical-align:top" 即可。

或者如果您想将文本放置在行中央，则可以使用 vertical-align:middle。

- kpotehin

Answer 2

在文本的<TD>中尝试使用这个CSS：

vertical-align:top;

i.e.:

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

- Marc

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>

根据您想要对齐的方式，应该使用顶部、底部和中心对齐。

- Rachel Arts

---

那可能会起作用，但我认为大多数网页设计师更喜欢在CSS中管理对齐方式。但这并不意味着你的答案是错误的！ - Marc