如何垂直对齐表格列的顶部和底部？答案

【问题标题】：How to vertically align a table column both top and bottom?如何垂直对齐表格列的顶部和底部？
【发布时间】：2010-10-01 23:20:43
【问题描述】：

..如果列的高度取决于另一列的高度？解决方案至少应该适用于 IE6,7 和 Mozilla。

HTML 表格布局：

+------------------------+----------+ |顶部对齐的段落 |这里 | | |是一个| | |非常| | |长 | | |正文 | | |那个| | |最终| | |确定 | | |整体| |底部对齐的段落|桌子高度。 | +------------------------+----------+

【问题讨论】：

标签： html internet-explorer-7 html-table vertical-alignment internet-explorer-6

【解决方案1】：

最简单的方法应该是在要对齐的单元格中使用 vertical-align 顶部和底部：

<table>
<tr>
<td class="top">
<p>Top aligned paragraph</p>
</td>
<td rowspan="2">
<p>Lorem ipsum dolor sit amet consectetuer id egestas condimentum neque elit. Non tortor tempus orci quis condimentum interdum dictum pede Duis enim. Sociis sollicitudin Nulla lacinia risus id sit odio pellentesque Vestibulum et. Ipsum pretium vestibulum et lobortis mauris semper In In id faucibus. Est Integer Curabitur dui Quisque eu habitasse Curabitur gravida vel semper. A libero vel nisl.</p>
</td>
</tr>
<tr>
<td class="bottom">
<p>Bottom aligned paragraph</p>
</td>
</tr>
</table>

然后是 CSS：

.top{
vertical-align:top;
}
.bottom{
vertical-align:bottom;
}

复制|粘贴

【讨论】：

只是想加我的 5 美分。在某些版本的 Odoo（例如 Odoo 9.0）中使用“valign”，但使用“vertical-align”可以完成这项工作。感谢您的评论

【解决方案2】：

使用 rowspan 属性 (http://www.htmlcodetutorial.com/tables/index_famsupp_30.html) 使长文本 (column2) 跨越两行。然后将 Para1 放在第一列第一行（对齐顶部），然后将 Para2 放在第一列第二行（对齐底部）。

--------------------------------------
|Para 1 Align Top |This is your very |                   
|                 |long text.  This  |
|                 |is your very long |
|_________________|text.             |
|                 |This is your very |
|                 |long text.  This  |
|                 |is your very long |
|Para2 align bottm|Text.             |
--------------------------------------

【讨论】：

【解决方案3】：

如果你不想使用表格，你可以这样做：

<style type="text/css" media="screen">
    .outer {
        position: relative;
        background-color: #EEE;
    }
    .right {
        width: 50%;
        margin-left: 50%;
        background-color: #F88;
    }
    .top,
    .bottom {
        position: absolute;
        width: 50%;
    }
    .top {
        top: 0;
        background-color: #8F8;
    }
    .bottom {
        bottom: 0;
        background-color: #88F;
    }
</style>

<div class="outer">
    <div class="right">Here<br>is a<br>very<br>long<br>text<br>that<br>eventually<br>determines<br>the overall<br>table height.</div>
    <div class="top">top-aligned paragraph</div>
    <div class="bottom">bottom-aligned paragraph</div>
</div>

【讨论】：