CODEWITHSUNDEEP
cssmenuvertical-alignment
menardmam
menardmam

Reputation: 9986

Bottom text align or menu

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

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

Upvotes: 0

Views: 2888

Answers (2)

bitmask
bitmask

Reputation: 34628

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.

Upvotes: 0

BalusC
BalusC

Reputation: 1108682

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>

Upvotes: 1

Related Questions