Bottom text align or menu_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-14 09:12 出处：网络

I have a menu the have rectangular boxes 90x50. Some have single line text, other have multil开发者_高级运维ine text

question : How to VERTICALLY align it to the bottom with pure css no hack please

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>

I think the vertical-align property does what you want. Otherwise, perhaps you can clarify your problem further?

Edit: You can force table-cell-like behaviour for any other element by using the display property with the value 'table-cell'. I am not perfectly sure if this works with well with the vertical-align property, but perhaps you can build on it. If I remember correctly, an additional intermediate element was required.