DIV内部垂直对齐底部UL

Question

I have a div with height:40px; and an ul with line-height:28px; . I would like to place the ul to the bottom, inside the div. I tried vertical-align:bottom; , but it doesn't help.

My other idea is the top margin, but if it's possible with vertical-align, I'll choose that.

My demo: http://jsfiddle.net/YpEd7/

Answer 1

Add line height to the container. Once you have line-height of 40px on the container, the vertical align bottom will align it to the bottom since your container is also 40px tall. It wasn't working before since the line-height of the container was less than 40px so the ul did align to the bottom of the default line-height

http://jsfiddle.net/YpEd7/2/

#container {
    background:gray;
    height:40px;
    line-height: 40px;
}

Answer 2

The same i posted in comment above^

#container {
    background:gray;
    height:40px;
    position: relative;
}
ul {
    margin:0;
    padding:0;
    list-style:none;
    position: absolute;
    bottom: 0px;
}

http://jsfiddle.net/25VV5/2/

Answer 3

You need to mix vertical-align to line-height in order to have this happen: DEMO

#container {
    background:gray;
    height:40px;
    line-height:40px;/* equal to height of container */
}

ul {
    margin:0;
    padding:0;
    list-style:none;
    vertical-align:bottom;/* fine since i'm inline-block */
    display:inline-block;
    line-height:1em;
}

ul li {
    line-height:28px;
    background:red;
    color:#fff;
    margin:0 20px 0 0;
    float:left;
}

Answer 4

Please stop perpetuating the line-height hack for vertical alignment. Vertical alignment only works when there is a sibling to reference.

If you only have one element that you want vertically aligned, you must first wrap it in an element with a defined height (can be %). Then you place the following class onto the container element.

CSS

.VAlignHelper:after {
    content:'';
    font-size:0;
    height:100%;
    vertical-align:middle;
    display:inline-block;
}

HTML

<div id="container" class="VAlignHelper">
    <ul>
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
    </ul>
</div>

Demo

http://jsfiddle.net/jmdrury/YpEd7/3/