Question

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

问题：如何垂直对齐底部与纯css没有黑客请

Answer 1

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

坚果：以下是真正的网络浏览器：

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

但不是在MSIE中。您希望将父元素设置为相对，并将文本包装在绝对定位的元素中，然后将其放在底部。这是一个copy'n'paste'n'runnable的例子。

<!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>

Answer 2

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

编辑：您可以使用值为'table-cell'的display属性强制执行任何其他元素的类单元格行为。我不完全确定这是否适用于vertical-align属性，但也许你可以在它上面构建。如果我没记错的话，还需要一个额外的中间元素。

底部文本对齐或菜单

2 个答案: