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
A:
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.
bitmask
2010-08-25 22:16:18
I know, but it's apply to table cell... i like text in a div
marc-andre menard
2010-08-25 22:27:40
+1
A:
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>
BalusC
2010-08-25 22:24:26
very interesting... but i have found : http://www.trash-factor.com/content/vertical-align-text-inside-div-container-css that show a solution maybe better for a MENU vie a href... i let you know !
marc-andre menard
2010-08-25 22:36:45