SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    center object vertically within div (was "seems like a common question???")

    hello gang, another css newb here.. This seems like a common question but I have not found an answer that works for me. I am trying to center an object (media player) vertically within a div based on percentage. The parent div id is "top", I have created a child div (id is "centered") but I am not sure if this is necessary. As of right know, the child div is centered vertically within the browser window. My code is below.

    #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%
    }

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

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The #centered div is not needed, but to set a percentage height on #top, it must be referenced to a parent's declared height. Setting both html and body to 100% height first provides that reference.

    By relatively positioning the movie, and setting top to 50%, the top of the movie will be at the vertical centre of #top. As the height of the movie is known, a negative top margin equal to half its total height (which includes the white border I put around it in the example below) pulls it back up to the middle. A small top padding added to #top will prevent the normal margin collapse action. The horizontal centering can be done using the standard auto side margins.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    * {
    	margin: 0;
    	padding: 0;
    }
    html, body {
    	height: 100%;
    }
    #top {
    	height: 70%;
    	background-color: Blue;
    	padding-top: 1px;
    }
    #player {
    	border: 10px solid white;
    	width: 352px;
    	height: 240px;
    	display: block;
    	margin: -130px auto 0;
    	position: relative;
    	top: 50%;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="top">
    	<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>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    many thanks centauri, that works perfect. Just to make sure that I understand, as I have a few other div's on the page that I will need to center the contents vertically based on a percentage. You have specified a height of 100% for the body and html. Then in the "top" div, the height that you refer back to with the 70% is that of the body & html that was previously set. Next, in the "player div, you are referencing the "top" div and stating that the player will be centered at 50%. Correct?

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basically. The top:50&#37; offsets the top of #player by 50% of the height of #top from where it would normally be displayed at the top (and in reality still actually occupies), and the negative top margin pulls it back up to centre. This will only work if the parent element has a defined height, and the height of the element you are centering is known.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •