Alineación vertical inferior UL dentro de DIV

Tengo un div height:40px; y una ul line-height:28px;. I would like to place the ul to the bottom, inside the div. I tried vertical-align:bottom;, pero no ayuda.

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

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

preguntado el 28 de mayo de 14 a las 14:05

jsfiddle.net/25VV5/1 this will not work? -

margin:12px 0 0 0; Would this not work as well? -

4 Respuestas

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

contestado el 28 de mayo de 14 a las 14:05

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/

contestado el 28 de mayo de 14 a las 14:05

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

contestado el 28 de mayo de 14 a las 14:05

Why the line-height:1em is required for ul? - Suresh Ponnukalai

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

@SureshPonnukalai to reset line-height inside li else, it is 40px too :) - G-Cyrillus

i just took out that and tested it. Works fine. - Suresh Ponnukalai

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.

CO

.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>

De demostración

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

contestado el 28 de mayo de 14 a las 17:05

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 ;) - G-Cyrillus

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. - Justin drury

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. - G-Cyrillus

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.