将两个元素与表格单元格的顶部和底部对齐

Posted

技术标签:

【中文标题】将两个元素与表格单元格的顶部和底部对齐【英文标题】:Align two elements to the top and bottom of a table cell 【发布时间】:2012-03-31 09:10:05 【问题描述】:

我有一个包含多行多列的表格,每个单元格都包含一个链接和一些小图像。链接需要对齐到单元格的顶部,图像需要对齐到底部。不幸的是,使用 vertical-align 属性不起作用,两个元素都被放置在单元格的中间。这是我到目前为止的 html

<table>
  <tr>
    <td style='width:120px; height:90px;'>
      <a href='1.html' style='vertical-align:top'>Link 1</a>
      <div style='vertical-align:bottom'><img src='1-1.jpg' /><img src='1-2.jpg' /></div>
    </td>
    <td style='width:120px; height:90px;'>
      <a href='2.html' style='vertical-align:top'>Link 2</a>
      <div style='vertical-align:bottom'><img src='2-1.jpg' /><img src='2-2.jpg' /></div>
    </td>
  </tr>
  <tr> ... </tr>
</table>

编辑:td 高度和宽度也定义为 120 x 90 像素

【问题讨论】:

【参考方案1】:

更新

参考http://davidwalsh.name/table-cell-position-absolute 得到了如下答案...

.tlink 
  position: relative;
  height: 100%;

.bimg 
  bottom: 0;
  position: absolute;
<table  border="1">
  <tr>
    <td>
      <div class="tlink">
        <a href='#'>Link One</a>
        <div class="bimg">
          <img src="http://farm4.static.flickr.com/3575/3293166516_de2cd751fc.jpg"   />
        </div>
      </div>
    </td>
  </tr>
</table>

【讨论】:

我像您一样使用 style 元素尝试了此解决方案,并使用 style 属性尝试了内联,但我发现垂直对齐没有变化。 行得通!现在我明白了为什么 div 通常比表格更受欢迎。 谢谢,这对我也有帮助。 -1 您的答案的第一部分似乎是错误的。第二部分(小提琴)正在做其他事情(交替对齐单元格顶部和底部),您可以使用&lt;table&gt;s 轻松完成。如果您删除答案的第一部分并澄清第二部分,将会很有帮助。 真的很糟糕的答案。这个答案的 90% 包括准确地重复问题所说的不起作用。不出所料,它没有用。这也表明回答者在发布之前甚至没有测试答案。然后第二部分(甚至没有包含在这个实际页面中)显示了使用错误工具完成工作的非常糟糕的做法(如果要显示表格,请使用表格标签。)

以上是关于将两个元素与表格单元格的顶部和底部对齐的主要内容,如果未能解决你的问题,请参考以下文章

设置表格视图单元格的高度以匹配底部到标签栏顶部

如何更改分组的表格视图单元格的背景?

与相邻单元格的特定元素对齐

动态集合视图单元格的顶部对齐方式应该相同

如何在表格单元格的垂直中心对齐 CSS 箭头?

插入/删除顶部/底部单元格时更新旧/新顶部/底部单元格的 backgroundView