HTML表格对齐图像和文本

In a sample article I added a html table widh 2 columns, left column for images and right column for image descriptions.

在一篇示例文章中，我添加了html表widh2列、图像左列和图像描述右列。

The problem is, the text description on the right column is below the images, it´s like the images are forcing the text to break into another line.

问题是,右边的文本描述列是以下图片,这´s像图像迫使进入另一条线的文本。

this is a sample code as I used:

这是我使用的示例代码:

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

You can see the problem here On this page

你可以在这一页看到这个问题

3 个解决方案

#1

You just have to add style="vertical-align:top" to td

您只需将style="vertical-align:top"添加到td

Or vertical-align:middle if you'd like to position the text in the middle of the row

或者垂直对齐:如果你想把文本放在行的中间

#2

So to understand you want the photo and the text to align correct? Can you use a valign attribute?

为了理解你想要照片和文本对齐正确吗?可以使用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>

Top, Bottom and Center should be used depending on how you want it to align.

顶部、底部和中心应该根据您希望它如何对齐来使用。

#3

Try this CSS in the text <TD>:

尝试在文本:

vertical-align:top;

i.e.:

例如:

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

#1