Within a parent div, I have child divs whose height ranges from 144px to 318px (min-height and max-height) depending on the window size.
I am trying to vertically align all the child divs within the parent. Using line-height doesn't work because the height is not fixed. Any ideas on how to achieve this?
Here is a snippet of the HTML:
<div id="mainDivPad">
<div id="ipadPad">
IMAGE
</div>
</div>
And here is the corresponding CSS:
#mainDivPad{
position: relative;
width:100%;
height:100%;
min-height:144px;
max-height:318px;
background-color:#f9e2ef;
}
#ipadPad{
float: right;
margin-right: 7%;
}
Edit:
The child div should adjust its position and size dynamically as the window size changes. (I understand that adjusting size is a separate issue)