我不能为我的生活弄清楚为什么我的桌子会这样。图像和文字应排成一行:
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;
}
要添加到Pete的答案,并使用CSS而不是内联表示标记,您可能需要尝试将vertical-align: middle
添加到表格单元格的css中。
作为事后的想法,你可能想要为包含图像的单元格添加一个line-height: 100px
(或者你的图像有多高,加上一点填充),并指定line-height: 50px
(图像单元格的50%线高)对于包含描述性文本的单元格,我不确定它是否有效,但是当vertical-align
没有时,它有时适用于居中文本。
可能想在TD标签上试一试。 valign =“中间”为他们所有人。
尝试暂时向表格添加边框,以便您可以看到图像和文本在各自的tds中对齐的位置。此外,您是否需要使用span作为描述文本?
什么浏览器?我复制粘贴你的HTML(添加了html和body标签),并复制粘贴你的CSS(添加了头部和样式标签),垂直对齐是准确的 - 与图片中的问题不符。
尝试为各种元素添加边框,看看是否能揭示疯狂。并确保您的代码与此处粘贴的代码之间没有拼写错误。
你在使用CSS重置文件吗?对我来说这看起来像CSS一样。也许行高?
我不确定它是否重要,但我会从使用break和span切换到使用标题和段落标签,然后再设置样式。
<td valign="middle">
<h2>Test Product</h2>
<p>This has a short description.</p>
</td>
为表和每个td标记使用固定宽度。您将表格的宽度设置为100%,并在第一个标签上设置固定宽度。第二和第三td标签基于td标签内的内容进行调整,以填充表标签上的100%宽度。