Home/ Questions/Q 1023249
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T11:35:16+00:00

I have a menu the have rectangular boxes 90×50. Some have single line text,

  • 0

I have a menu the have rectangular boxes 90×50. Some have single line text, other have multiline text

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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