vertically align div within div

**dkirk** · 12-28-2007 01:36 PM

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:

#top {
text-align: center;
height: 70%;
background-color: Blue;
}
#centered
{
border: 0;
background-color: White;
height: 50%;
width: 50%;
position: absolute;
left: 25%;
top: 25%
}

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:

<div id="top">
<div id="centered">
<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"/>
</object>
</div>
</div>

Any help would be greatly appreciated...

**Typhoon101** · 12-28-2007 03:28 PM

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.

For example:

HTML Code:

<html>
<head>
<style>
#top {
  background:yellow;
  height:500px;
  width:200px;
  text-align:center
}

#centred {
  position:relative;
  width:50px;
  height:50px;
  background:red;
  top:50%;
  margin-top:-25px
}
</style>
</head>
<body>
<div id="top">
  <div id="centred"></div>
</div>
</body>
</html>

Hope this helps

**dkirk** · 12-28-2007 03:59 PM

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...

Thread: vertically align div within div

Thread Tools

Display

vertically align div within div

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions