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
Pavle Lucic
10,801 PointsVertical align with other display values
Guil Hernandez is it possible to verticaly align element with other display values?
Pavle Lucic
10,801 PointsTnx Guil, i think that i have created solution for inline and inline-block elements. (in answer below).
3 Answers
Pedro Trindade
15,566 PointsIf 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
10,801 PointsOk, 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
15,566 PointsI 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
10,801 PointsNothing 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
10,801 PointsI 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
10,801 PointsI think that depends on the project as well, as when i work, soemtiems the other option is better. But thats cool.
Guil Hernandez
Treehouse TeacherGuil Hernandez
Treehouse TeacherHi Pavle Lucic,
Check out these 3 other ways you can achieve vertical alignment.
Hope this helps. :)