Vertical align bottom UL inside DIV
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/
4 Answers 4
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
The same i posted in comment above^
You need to mix vertical-align to line-height in order to have this happen: DEMO
Note , that defaut value for vertical-align is baseline, so if you remove it , your li will stand on the middle of 40px height
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
HTML
Demo
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 😉
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.
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.
align text-line to bottom
CSS aligns the text in the middle of the line, but I’d like to have the text aligned to the bottom of the line. Best explained with a picture: Like it should be: https://lh5.googleusercontent.com/-L1TBqTxEVHI/UDPVEOnFY7I/AAAAAAAAAH4/GHZHt776wmg/s145/CD-Manual_Stand_Mai_2011_Verlinkungen.pdf%2520%2528Seite%2520135%2520von%2520248%2529.jpg Like it is: https://lh6.googleusercontent.com/-0SiQqqkHD9k/UDPVNvTA2NI/AAAAAAAAAIA/2VudybQxnDE/s45/CSSEdit.jpg Vertical-align doesn’t work, it does only work for nested elements and not the entire text. Where’s the trick? 🙂 Here is the code: jsfiddle.net/vmadd
Here is the code: jsfiddle.net/vmadd especially at the bottom you can see the problem. «Name» is to close to the line — and the cleanest solution would be to align the text to the lines bottom (for the hole document.)
2 Answers 2
Try line-height: 100%
that should fix you problem.
I don’t actually see what you are after. There is no such thing as a baseline alignment or something in standard css (to my knowledge). I don’t realy see what that would change in the layout eather.
As for the footer, if you just want some more space between the line and the text, there are plenty af ways to achieve this. Something like this:
Should do the trick. Or even better, declare a special class for things you want to have some top padding, and apply it to the elements you want. As said, there are dozens of ways to achieve this (line-height, margin-top, insert blank div, make the line have padding bottom, . ) If you wrote that css yourself, I’m surprised this causes you problems.
HTML/CSS: Vertical aligning span with vertical-align and line-height
The following values vertically align the element relative to the entire line:
bottom
Aligns the bottom of the element and its descendants with the bottom of the entire line.
It is the last version above that I would expect to position the span at the bottom. It says the line-box should be 50px, then vertical-align is used on the child span .
PS: Please don’t just say «use flexbox» or similar. I would like to understand the inner workings / conceptually why the above did not position the span at the bottom of the line.
From developer.mozilla.org/en-US/docs/Web/CSS/vertical-align «Note that vertical-align only applies to inline and table-cell elements: you can’t use it to vertically align block-level elements.»
Guys, please read the post / know how it works, before replying. You can try to surround the span in another span if you like, and place the line-height on that, or place the line-height on the span itself, it makes no difference. @Dan I am not using vertical-align on a block element, I am using it on a span where the linebox is taller than the element itself.
@dippas it doesn’t have to be a block element. vertical-align applies to inline elements and the OP is aware about how to align vertically, but there is a confusion of line-height, that’s why we don’t have the desired effect. It’s not about «how to align» but «why alignment is not working as expected»
3 Answers 3
Everything you said is right but you simply forget something which is inheritance. The span element is having the same line-height defined on the div that’s why bottom has no effect in your case.
Reset the value to initial and it will work.
Amazing, spot on. Thank you. I will try a few things and see if any other questions come up. Otherwise will mark this as the solution. That also explains why it works when there are two elements on the line (forces the linebox bigger than the smallest element).
@Magnus try to add line-height:0 to the span and increase it to see what happen 😉 then you will understand eveyrthing
In this case, the div-element will contain a line box with line-height of 50px. Then you add a span-element with a line-height that is less than 50px. The span-element can therefore be vertically aligned relative the rest of the line box.
A line box can have multiple elements with different line-heights. For example:
Segment 1 Segment 2 Segment 3
By default, all the elements in the paragraph has the same line-height.
But if let the span elements have a smaller line-height than the paragraph, I can adjust them relative to each other with vertical-align .
p < background-color: black; color: white; line-height: 40px; >.segment1 < background-color: red; line-height: 20px; vertical-align: top; >.segment2 < background-color: green; line-height: 20px; vertical-align: baseline >.segment3
The property vertical-align can be used to vertically align an inline element’s box inside its containing line box.
In your first example, you are trying to vertically align the text inside the elements own line box. This is not possible. If you increase the line-height, an equal amount of space will be added above and below the baseline.
In your second example, you are trying to vertically align an inline element ( ) inside a block element ( ), not a line box.
How to align content of a div to the bottom
The header section is fixed height, but the header content may change. I would like the content of the header to be vertically aligned to the bottom of the header section, so the last line of text «sticks» to the bottom of the header section. So if there is only one line of text, it would be like:
----------------------------- | Header title | | | | header content (resulting in one line) -----------------------------
----------------------------- | Header title | | header content (which is so | much stuff that it perfectly | spans over three lines) -----------------------------
29 Answers 29
Relative+absolute positioning is your best bet:
#header < position: relative; min-height: 150px; >#header-content < position: absolute; bottom: 0; left: 0; >#header, #header *
Title
And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States. But you may run into issues with that. When I tried it I had problems with dropdown menus appearing below the content. It’s just not pretty.
Honestly, for vertical centering issues and, well, any vertical alignment issues with the items aren’t fixed height, it’s easier just to use tables.