Vertical Align Methods

Question

What are the best methods to vertically-align something relative to it\'s elements dimensions. As of right now, I\'m only aware of vertical-align:middle;<

Answer 1

A great place for you to start is this article by CSS Tricks. It goes over every value that vertical-align can have and the different uses of each in a clear concise way.

Here are the options:

vertical-align: baseline     /* keyword values */
vertical-align: sub
vertical-align: super
vertical-align: text-top
vertical-align: text-bottom
vertical-align: middle
vertical-align: top
vertical-align: bottom

And here are the valid options for table cells:

baseline (and sub, super, text-top, text-bottom, , and )
Align the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.
top
Align the top padding edge of the cell with the top of the row.
middle
Center the padding box of the cell within the row.
bottom
Align the bottom padding edge of the cell with the bottom of the row.

Additionally, you may want to try some other tricks like setting the line-height equal to the parent container's height.