The vertical-align property in CSS controls how elements set next to each other on a line are lined up.
img {
vertical-align: middle;
}In order for this to work, the elements need to be set along a baseline. As in, inline (e.g. <span>, <img>) or inline-block (e.g. as set by the display property) elements.
The valid values are:
baseline– This is the default value.top– Align the top of the element and its descendants with the top of the entire line.bottom– Align the bottom of the element and its descendants with the bottom of the entire line.middle– Aligns the middle of the element with the middle of lowercase letters in the parent.text-top– Aligns the top of the element with the top of the parent element’s fonttext-bottom– Aligns the bottom of the element with the bottom of the parent element’s font.sub– Aligns the baseline of the element with the subscript-baseline of its parent. Like where a<sub>would sit.super– Aligns the baseline of the element with the superscript-baseline of its parent. Like where a<sup>would sit.length– Aligns the baseline of the element at the given length above the baseline of its parent. (e.g. px, %, em, rem, etc.)
You can see examples of each here:
A common use case is lining up an avatar with a username. To get them centered along a line, you’d use vertical-align: middle;. Although note that it centers the text according to its tallest ascender and deepest descender.
Each element lines up according to the line you’ve set, which doesn’t change from element to element. So, you can mix-and-match which elements have which value – the elements don’t affect each other.
Note that vertical-align is useful on table-cell elements as well, aligning the content within them. Sticking to top, middle, and bottom is the best bet though, as the other values have inconsistent cross-browser results.
More Information
- What is vertical-align?
- This property does not allow you to “vertically center” an element within another element. Flexbox is more of the proper tool there. However, there is a trick involving a pseudo “ghost” element that can allow this to work.
- MDN
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Any | Any | Any | 4+ | 4+ | Any | Any |
Note that some replace elements (e.g. <textarea>) are inline, but their baseline isn’t specified, so behavior may vary from browser to browser.
Hey Guys, Checkout Chris’ artical on Vertical-align here: https://css-tricks.com/what-is-vertical-align
N
thanks, your lecture works great..
Nice explanation. Thanks.
Thanks, very helpfull
Thanks for the amazing article :)
How come the property name is vertical-align and a few of the property values starts with text ( text-top, text-bottom )
What a naming convention :(
What is the reason for > * following the class selector in the css rule on the demos?
Star hack to target all children the next level down
What does “In order for this to work, the elements need to be set alone a baseline.” mean??
Even with the example, for people learning CSS, this sentence does not make sense. The problem is not what baseline means, its the grammar of the sentence that throws everything off.
Can you please explain?
alone should be along
I pretty sure you just mistyped, but it says it needs to be set ‘along’ a baseline. This means that the element that you want to vertically align needs a surrounding element with which to align itself with in some way. For instance, if you have an inline
<img>element (image element) within a<p>element (paragraph element), the text of the paragraph would be considered a baseline that you can vertically align the image with. You can’t simply stick an image inside of a<div>element and then try to move the image within that element with the vertical-align property. It won’t do anything. Now if you did:You use the text ‘Hello World!’ as a baseline around which you align your img. This is an old question, I know, but hopefully this helps someone in the future.
How is can a container be fixed to the top of the webpage, so it wont disappear if the webpage is being srolled down (in css)
You could do something like this:
Or, if the container starts in the middle of the page and you want it to stick when it reaches the top, here’s an example (though you’ll need JavaScript):
Why does the code not work if we don’t use > * (star selector)?
Elementor is giving me this warning: The universal selector (*) is known to be slow.
Some insight into the above 2 points would be appreciated. Thank you in advance.
I was wondering the same thing and came across this response from Code Academy:
https://www.codecademy.com/forum_questions/51f232fe631fe94cb9000f5d
From the sounds of it, this used to be a caution in old timey web development, like 15-20 years ago. So the warning still exists in some editors today, but it’s really nothing to worry about!
Or try :
display: grid;align-items: center;