html - 简单的 HTML 看起来很不靠谱？

Question

我这辈子都弄不明白为什么我的 table 会变成这样。图片和文字应该对齐:

HTML:

<div id="items">
  <div class="category"><h1>Apparel</h1></div>
  <div class="list-product">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td width="50" align="center" style="padding-right: 5px;">
        <img height="30" src="/images/products/none.jpg" />
      </td>
      <td>
        <img style="padding: 0 3px 0 0;" src="/images/icons/flag_red.png" />
      </td>
      <td valign="middle">
        <strong>Test Product</strong><br />
        <span style="color: #777;">This has a short description.</span>
      </td>
    </tr>
  </table>
  </div>
  ... and the other table here
</div>

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;
}

Answer 1

要添加 Pete 的答案，并使用 CSS 而不是内联表示标记，您可能想尝试将 vertical-align: middle 添加到表格单元格的 css。

作为事后的想法，您可能想要为包含图像的单元格添加 line-height: 100px(或者无论您的图像有多高，再加上一点填充)，并指定line-height: 50px(图像单元格行高的 50%)对于包含描述性文本的单元格，我不确定它会起作用，但有时它可以用于居中文本vertical-align 没有。