底部文本对齐或菜单答案

【问题标题】：Bottom text align or menu底部文本对齐或菜单
【发布时间】：2010-08-26 06:40:24
【问题描述】：

我有一个菜单，有 90x50 的矩形框。有些是单行文字，有些是多行文字

问题：如何使用纯 css 将其垂直对齐到底部，请不要破解

【问题讨论】：

【解决方案1】：

CSS 中的垂直对齐并不像您想象的那么容易。到目前为止，简单的属性vertical-align: bottom 仅适用于表格单元格。这是一个很好的资源，它解释了如何（不）在 CSS 中垂直对齐：Understanding vertical-align, or "How (Not) To Vertically Center Content"。

简而言之：以下内容适用于真正的网络浏览器：

display: table-cell;
vertical-align: bottom;

但因此不在 MSIE 中。您想使父元素相对并将文本包装在绝对定位的元素中，然后将其放在底部。这是一个可复制和粘贴的可运行示例。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test</title>
        <style>
            li {
                position: relative;
                width: 90px; 
                height: 50px; 
                border: 1px solid black;
            }
            li span {
                position: absolute;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><span>text</span></li>
            <li><span>text<br>multiline</span></li>
            <li><span>text</span></li>
        </ul>
    </body>
</html>

【讨论】：

非常有趣...但我发现：trash-factor.com/content/… 显示了一个解决方案，可能更适合 MENU vie a href...我让你知道！

【解决方案2】：

我认为vertical-align 属性可以满足您的需求。否则，也许您可以进一步澄清您的问题？

编辑：您可以通过使用值为“table-cell”的display 属性来强制任何其他元素具有类似表格单元格的行为。我不确定这是否适用于 vertical-align 属性，但也许您可以在此基础上进行构建。如果我没记错的话，需要一个额外的中间元素。

【讨论】：

我知道，但它适用于表格单元格...我喜欢 div 中的文本