/    Sign up×
Community /Pin to ProfileBookmark

vertically align div within div

Copy linkTweet thisAlerts:
Dec 28.2007

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…

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@Typhoon101Dec 28.2007 — 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:
[LIST=1]
  • [*]Set the position of the centred object to [B]relative.[/B] This will allow you to move it relative to it's parent div.

  • [*]Set the top to 50%. This will align the [B]top[/B] 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.
    • [/LIST]    For example:

    [code=html]
    <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>
    [/code]

    Hope this helps
    Copy linkTweet thisAlerts:
    @dkirkauthorDec 28.2007 — 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...
    ×

    Success!

    Help @dkirk spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.4,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...