简单的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中。

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

Answer 2

可能想在TD标签上试一试。 valign =“中间”为他们所有人。

Answer 3

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

Answer 4

什么浏览器？我复制粘贴你的HTML（添加了html和body标签），并复制粘贴你的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％宽度。