Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Techniques Display Modes Table Display

Pavle Lucic
Pavle Lucic
10,801 Points

Vertical align with other display values

Guil Hernandez is it possible to verticaly align element with other display values?

Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Pavle Lucic,

Check out these 3 other ways you can achieve vertical alignment.

  • line-height
  • top/bottom padding
  • flexbox

Hope this helps. :)

Pavle Lucic
Pavle Lucic
10,801 Points

Tnx Guil, i think that i have created solution for inline and inline-block elements. (in answer below).

3 Answers

Pedro Trindade
Pedro Trindade
15,566 Points

If you have a fixed height you can, with percentages and negative margins.

For instance, lets say you have a picture with an height of 200px. If you want to vertically align it, you could do:

.yourPicture{ position: relative; top: 50%; margin-top: -100px; }

Basically, you are aligning the top end of the picture to the middle of the parent element and then you adjust the margin with a negative value of half the height, so you can get it properly centered.

Pavle Lucic
Pavle Lucic
10,801 Points

Ok, yes. That is one solution. But is there some situations where i can use vertical align propery on elements with inline-block , inline, or block display?

Pedro Trindade
Pedro Trindade
15,566 Points

I think vertical-align was created to align elements with text inline, much like our profile pic is aligned with our stats on the top-right corner.

Are you trying to achieve anything in particular ?

Pavle Lucic
Pavle Lucic
10,801 Points

Nothing particular. Sometimes when I have some project to create webpages, i run into complex calculation. For example if there are many elements that needs to be verticaly aligned, with different heights.... Based on techics i need to calculate paddings , line-heights.... (which cosumes more times), instead of using vertical align property, where browser will dynamic calculate, and set the position of elements....

Pavle Lucic
Pavle Lucic
10,801 Points

I created solution for vertical align (dynamic) inline and inline-block elements

https://jsfiddle.net/pavlito/qhvwab53/

If inline (or inline-block) element needs to be verticaly aligned, he needs to have an element on the basis of which will be aligned.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

I think that depends on the project as well, as when i work, soemtiems the other option is better. But thats cool.