Vertical align bottom UL inside DIV

html css vertical-alignment

14,928

Solution 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;
}

Solution 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/

14,928

Author by

user1452062

Updated on June 04, 2022

Comments

user1452062 almost 2 years

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/
Suresh Ponnukalai almost 10 years

Why the line-height:1em is required for ul?
G-Cyrillus almost 10 years

Note , that defaut value for vertical-align is baseline, so if you remove it , your li will stand on the middle of 40px height
G-Cyrillus almost 10 years

@SureshPonnukalai to reset line-height inside li else, it is 40px too :)
Suresh Ponnukalai almost 10 years

i just took out that and tested it. Works fine.
G-Cyrillus almost 10 years

vertical-align + line-height for text and inline-boxes work fine, it is what it is meant for, move an element from its' base line whithin text or among other inline-boxes.It sets a min-height too to the element if none set in CSS. you can play with this codepen.io/gc-nomade/pen/rmxpo to find out interaction with elements and baseline/line-height ;)
Justin Drury almost 10 years

Line height is absolutely not designed for aligning elements. It is designed to provide the ability to change the spacing between line box elements such as 'p'. For example, making a block of text double spaced. You can confirm this by reviewing the specs online on Mozilla or W3.
G-Cyrillus almost 10 years

This is what it is about here, set an inline-box down the bottom. ....... here we have an element and one line/inline-box. ..... That you set a line-height or not, tall element will stretch it. This is what your pseudo element is doing, stretching the line-height up to 40px, but only on the line it will stands. jsfiddle.net/YpEd7/4 my answer did not use pseudo because you did & cause i was called the master of pseudo-elements in another question (do i use them too much ? :) ). I thought usefull to remind how line-height works and what it involves.