vertically align div within div
css newbie here... I am trying to center an object vertically within a div that is relative to the parent div. Here is my relevant css:
I am trying to center the "centered" div vertically within the "top" div. As of right now the "centered" div is vertically centered in the page. I need everything based off percentage, not pixels or ems...
My html is below:
<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="352" height="240">
<param name="URL" value="images/wood_is_life.avi"/>
<param name="autoStart" value="true"/>
<param name="uiMode" value="none"/>
Any help would be greatly appreciated...
Vertical alignment is always a problem with CSS layouts. This is the only way i can think of achieving it. It requires you to know the height of the object you want to centre vertically, but that is not a problem in your case, as you do know the height.
Basically, follow these steps:
- Set the position of the centred object to relative. This will allow you to move it relative to it's parent div.
- Set the top to 50%. This will align the top of the centred object to the centre of the parent div.
- Finally, set the top margin to negative half the height of the centred div. This will move the centred div so the centre will be aligned with the centre of the parent div.
Hope this helps
Thanks for the response, the problem is that I cannot set a fixed dimension on the "top" div. I need this div to cover 70% of the screen no matter what the screen resolution...
Users Browsing this Thread
There are currently 2 users browsing this thread. (0 members and 2 guests)