简单的HTML出来了吗？

Question

我不能为我的生活弄清楚为什么我的桌子会这样。图像和文字应排成一行：

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中。

作为事后的想法，你可能想要为包含图像的单元格的CSS添加line-height: 100px（或者你的图像有多高，再加上一点填充），并指定line-height: 50px（50对于包含描述性文本的单元格，图像单元格的行高度的百分比，我不确定它是否有效，但有时在vertical-align没有时将文本居中。

Answer 2

可能想在TD标签上试一试。对所有人来说，valign =“中间”。

Answer 3

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

Answer 4

什么浏览器？我复制粘贴你的HTML（添加了html和amp标签），并复制粘贴你的CSS（添加了头部和样式标签），垂直对齐是准确的 - 与图片中的问题不符。

尝试为各种元素添加边框，看看是否能揭示疯狂。并确保您的代码与此处粘贴的代码之间没有拼写错误。

Answer 5

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

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

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

Answer 6

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