为什么 'Vertical-align:bottom' 不能在这张桌子上工作答案

【问题标题】：Why isn't 'Vertical-align:bottom' working on this table为什么 'Vertical-align:bottom' 不能在这张桌子上工作
【发布时间】：2011-05-18 10:12:03
【问题描述】：

这让我发疯了，可悲的是哈哈。我不知道为什么我不能使表格中的“X”与表格底部对齐...我尝试将垂直对齐放在 CSS 中的不同位置，但无济于事:( . 我是否正确使用了表格中的空白点？

这是我的 HTML 和 CSS 文件的片段...任何 cmets 将不胜感激

<html>
<head>
<title>Day4: Table King</title>
<link rel="stylesheet" type="text/css" href="stylesday4.css" />
</head>

<body>
 <table id="products">
  <tr>
  <th><span></th>
<th>Free Version</th>
<th>Lite Version</th>
<th>Full Version</th>
 </tr>
 <tr>
  <td>Advertising</td>
  <td id="td">X</td>
  <td><span></td>
  <td><span></td>
 </tr>
 <tr class="alt">
  <td>Catering Software</td>
  <td><span></td>
  <td id="td">X</td>
  <td id="td">X</td>
 </tr>

....

#products
{
border-collapse:collapse;
width:100%;
}
#products th, #products td
{
border:1px solid #0000FF;
background-color:#C0C0C0;
padding:3px 2px 7px 5px;
}
#products th
{
font-size:20px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#0000FF;
padding-top:4px;
padding-bottom:5px;
background-color:green;
}
#products td
{
vertical-align:bottom;
}
#products tr
{
text-align:center;
color:#0000FF;
}
#products tr.alt td
{
color:blue;
background-color:#A7C942;
}

【问题讨论】：

标签： html css text vertical-alignment alignment

【解决方案1】：

您可以在td 和table 上使用position: relative，然后使用bottom: 0px 将td 移动到底部。

不过，我认为这个网站应该更清楚地回答你的问题：http://shouldiusetablesforlayout.com

【讨论】：

嗯，第二行应该是正确的答案。

【解决方案2】：

那是因为您在 td 中有一个 7 像素的底部填充。你可以改成

padding:3px 2px 0 5px;

间距消失了。

http://jsfiddle.net/6AAvH/2/

【讨论】：

【解决方案3】：

使用您提供的 HTML 和 CSS，垂直对齐似乎可以正常工作。我在这里 http://jsfiddle.net/dttMd/ 对 jsfiddle 设置了一个小测试。我在第一行放了一些换行符，以确认以下文本是底部对齐的。如果这不是您所追求的，您能否澄清一下您到底需要什么。

至于空单元格，您所做的是错误的，因为  元素需要有一个结束标记。我个人的偏好是将&nbsp; 放入单元格中。我不认为确实有一种“正确”的方式，尽管是必要的（尽管我很高兴得到纠正）。

【讨论】：

【解决方案4】：

您只需在每个td 中添加valign="bottom"，这将使内容在底部对齐，并受到世界上所有浏览器的支持！

希望这会对你有所帮助。

【讨论】：

它是垂直对齐（不是 valign），它不起作用。

【解决方案5】：

填充可能会影响布局和高度/宽度。从你的td 中去掉填充，然后给它一个高度。

有时行高会使它看起来好像没有与顶部或底部对齐。如果您的字体大小小于其容器，则它可能继承了行高。如果您将行高设置为字体大小（或只是line-height: 1）并给td 一个高度，那应该可以解决问题。

<td height="18" valign="bottom" style="font-size:9px; line-height:9px;">TEXT</td>

您的 缺少结束，并且您不应该使用跨度来占用空间，因为它是一个内联元素。对于表格，您甚至不需要占位符，但如果您更舒服，可以使用 &nbsp; 或者如果您希望它继承某种填充/边距样式，您可以使用该元素（&nbsp; 或 @ 987654329@)。

【讨论】：