CSS：文本对齐顶部和细胞

的底部比方说，我有这样的代码：CSS：文本对齐顶部和细胞

<table> 
<tr> 
    <td> 
     <div id="top">top</div> 
     <div id="bot">bottom</div> 
    </td> 
</tr> 
</table>

我试图通过CSS对齐#top返回到细胞和#bot的顶部到底部。

#top { vertical-align:top; } 
#bot { vertical-align:bottom; }

以上似乎并不奏效 - 它似乎没有任何效果。这里有一个代码链接：http://jsfiddle.net/vKPG8/28/

任何解释为什么会发生这种情况，以及如何解决它？

来源

2013-02-03 dk123

vertical-align用于内联元素，div是块元素。试用position: absolute和top: 0和bottom: 0。

td { 
    position: relative; 
    width: 200px; 
    height: 100px; 
    border: solid 1px; 
} 

#top, #bot { position: absolute; } 
#top { top: 0; } 
#bot { bottom: 0; }

演示：http://jsbin.com/iyosac/1/edit
在这里获得更多的信息：http://css-tricks.com/what-is-vertical-align/

来源

2013-02-03 08:54:02 elclanrs

+1不错清晰的解释和工作演示。 – Menztrual

不错！感谢您的解释和演示。它很棒！ – dk123

这不适用于Mozilla！ –

使用位置接受的解决方案：绝对不是这个问题的一个跨浏览器兼容的解决方案，因为Firefox不会（并根据到spec不应该）允许绝对定位在具有display：table-cell的表格单元格或元素中。

似乎没有一个真正可靠的CSS解决这个问题的方法，但我确实有一个只适用于这种情况的CSS。基本上，我所做的是插入一个before元素，该元素的高度足以强制底部的文本行到底部，因为它具有vertical-align：bottom set。这与放置顶部垫子基本相同，所以它不是什么解决方案。

演示：http://jsfiddle.net/Be7BT/

td {width:200px;height:100px;border:solid 1px;} 
#top { 
    display: inline-block; 
    vertical-align:top; 
    width: 100%; 
} 
#bot { 
    display: inline-block; 
    vertical-align:bottom; 
    width: 100%; 
} 
#bot:before{ 
    content: ''; 
    display: inline-block; 
    height: 100px; 
}

来源

2014-01-15 18:33:43 TorranceScott

有没有办法做到如果主td的高度最初不知道（例如，如果它的行跨度大于1，高度是由其他行决定的话） –

不，我不这么认为，你可能需要设置高度javascrpit使这是一个动态的解决方案 – TorranceScott

谢谢，它看起来好像没有很好的跨浏览器的方式来实现这一点我已经尝试了几种方法 –

我有更好的想法，使用嵌套表：

<table width="100px" height="100px" border=1> 
    <tr> 
     <td valign="top">top</td> 
    </tr> 
    <tr height=100%> 
     <td valign="bottom">bottom 
     </td> 
    </tr> 
</table>

来源

2014-07-23 08:37:52

不幸的是，这也只适用于外部表格单元的高度是预设的。 –

做到这一点的方法是使用rowspan：

<table><tr> 
    <td rowspan=2>tall<br>tall<br>tall<br>tall<br> 
    <td valign="top">top</td> 
</tr><tr> 
    <td valign="bottom">bottom</td> 
</tr></table>

来源

2017-03-12 00:10:57 NateS

CSS：文本对齐顶部和细胞

回答

相关问题