简单的HTML看起来很不对劲？

我一辈子都搞不懂为什么我的桌子会变成这样。图像和文本应对齐：

HTML:

---

可能想试试TD标签上的valign。valign=“middle”用于所有标签。

为您的桌子和每个td标签使用固定宽度。将表的宽度设置为100%，并在第一个标记上设置固定宽度。第二个和第三个td标记正在根据td标记内的内容进行调整，以填充表格标记上的100%宽度。

要添加到Pete的答案中，并使用CSS而不是内联表示标记，您可能需要尝试将

垂直对齐：中间

添加到表格单元格的CSS中

---

作为事后考虑，您可能希望为包含图像的单元格在CSS中添加

行高：100px

（或者无论图像有多高，再加上一点填充），并为包含描述性文本的单元格指定

行高：50px

（图像单元格行高的50%），我不确定它是否有效，但它有时可以在垂直对齐时居中文本。

尝试临时在表格中添加边框，以便您可以看到图像和文本在各自的tds中对齐的位置。另外，您是否需要使用span作为描述文本？

什么浏览器？我复制粘贴了你的HTML（添加了HTML和body标记），复制粘贴了你的CSS（添加了head和style标记），垂直对齐是准确的——与图片中的问题不匹配

---

试着给各种元素添加一个边框，看看这是否能让你看到疯狂。并确保您的代码与粘贴在此处的代码之间没有拼写错误。

您使用的是CSS重置文件吗？对我来说，这看起来像是CSS。也许是线高

我不确定这是否重要，但我会从使用break和span切换到使用heading和段落标记，然后只设置它们的样式

  <td valign="middle">
    <h2>Test Product</h2>
    <p>This has a short description.</p>
  </td>

测试产品
这有一个简短的描述

这并不是对你问题的回答（这就是为什么我刚才对此发表评论的原因），但你是否考虑过在布局中不使用表格？我同意Chris的观点，对于这样一个简单的布局来说，HTML太多了。HTML列表更合适。我建议使用

背景色

s而不是

边框

，因为边框会增加高度，有时会进一步扭曲布局。Touché。我想我自己会采纳的。：-）原来我的重置CSS文件将“垂直对齐：基线”应用于所有内容。谢谢

div#items
{
width: 400px;
}

div.category
{
padding: 7px 13px;
background: #f0f0f0;
color: #101010;
font-size: 20px;
border-bottom: 1px solid #d0d0d0;
}

.list-product
{
border-bottom: 1px solid #ddd;
font-size: 12px;
padding: 10px;
}

  <td valign="middle">
    <h2>Test Product</h2>
    <p>This has a short description.</p>
  </td>