Question

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

.base{
        background-color:green;
	    width:200px;
	    height:200px;
	    overflow:auto;
	    position:relative;
	}

    .vert-align{
		padding-top:50%;
		height:50%;
	}

<!-- and used the following div structure. -->

    <div class="base">
       <div class="vert-align">
    	   Content Here
       </div>
    </div>

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 1

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)