How to set the margin or padding as percentage of height of parent container?

html css vertical-alignment
Ryan picture Ryan · Feb 13, 2011 · Viewed 210.2k times · Source

I had been racking my brains over creating a vertical alignment in css using the following

While this seemed to work for this case, i was surprised that when i increased or decreased the width of my base div, the vertical alignment would snap. I was expecting that when I set the padding-top property, it would take the padding as a percentage of the height of the parent container, which is base in our case, but the above value of 50 percent is calculated as a percentage of the width. :(

Is there a way to set the padding and/or margin as a percentage of the height, without resorting to using JavaScript?

Answer

Camilo Martin picture Camilo Martin · Apr 4, 2012

The fix is that yes, vertical padding and margin are relative to width, but top and bottom aren't.

So just place a div inside another, and in the inner div, use something like top:50% (remember position matters if it still doesn't work)

Related questions

How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More
How to align content of a div to the bottom

Say I have the following CSS and HTML code: 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, …

Read More
How do I vertically align text in a div?

I am trying to find the most effective way to align text with a div. I have tried a few things and none seem to work.

Read More