当前位置：文江博客话题详情

底部文本对齐或菜单

发布于 2024-09-16 04:28:57 字数 79 浏览 8 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

零度℉ 2024-09-23 04:28:57

CSS 中的垂直对齐并不像您直观地期望的那么容易。到目前为止，简单的属性vertical-align:bottom仅适用于表格单元格。这是一个很好的资源，解释了如何（不）在 CSS 中垂直对齐：理解垂直对齐，或“如何（不）垂直居中内容”。

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

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>

Vertical aligninment in CSS isn't that easy as you'd intuitively expect. As far the straightforward property vertical-align: bottom works in table cells only. Here's an excellent resource which explains how (not) to vertical align in CSS: Understanding vertical-align, or "How (Not) To Vertically Center Content".

In a nut: the following works in real webbrowsers:

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

But thus not in MSIE. You'd like to make the parent element relative and wrap the text in an absolutely positioned element and then put it to bottom. Here's a copy'n'paste'n'runnable example.

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

回复收藏 0 原文