943,491 Members | Top Members by Rank

Ad:
You are currently viewing page 1 of this multi-page discussion thread
Jul 16th, 2004
0

CSS center vertical

Expand Post »
Ok guys, here's the deal. I am using css for my website, everything is super duper, except for ONE page. It's the login page, I have used a table for the login box so as to position everything properly. What I want to know is, (btw the table is in a div) how do I vertically align my table to the center of the web page using css, is there a way at all? Otherwise I'm just going to have to use padding to get it away from the top a bit.
Reputation Points: 115
Solved Threads: 7
Practically a Master Poster
Slade is offline Offline
633 posts
since Mar 2004
Jul 16th, 2004
0

Re: CSS center vertical

As far as I know, it's industry standard to set a padding or a margin. Can't seem to find a way to do it Check out http://www.stunicholls.myby.co.uk/ie/valign.html though.
Administrator
Staff Writer
Reputation Points: 1422
Solved Threads: 162
The Queen of DaniWeb
cscgal is offline Offline
13,645 posts
since Feb 2002
Jul 16th, 2004
0

Re: CSS center vertical

My only problem with this technique has always been with the text being centered as well. I don't always want the text to be centered as well.

<-- Stumped
Reputation Points: 11
Solved Threads: 0
Light Poster
gooseneck is offline Offline
38 posts
since Jun 2004
Jul 16th, 2004
0

Re: CSS center vertical

I can acheive it on mozilla (firefox latest) and netscape (latest) but the other browsers hate it. Man why can't all browsers just have the same definition on things :mad:
Reputation Points: 115
Solved Threads: 7
Practically a Master Poster
Slade is offline Offline
633 posts
since Mar 2004
Jul 17th, 2004
0

Re: CSS center vertical

It's simple to do actually. You use negative margins, and it works in IE5 upwards.

Here's a demo created by a mate of mine:
http://www.infinitypages.com/researc...entereddiv.htm
Reputation Points: 54
Solved Threads: 20
Master Poster
DaveSW is offline Offline
765 posts
since Jul 2004
Jul 17th, 2004
0

Re: CSS center vertical

While searching for a solution the other day, I came across using negative margins, but I was confused and didn't understand how they work. I'm still confused, actually. I checked out the CSS you provided - but I don't see how using negative margins centers the div?
Administrator
Staff Writer
Reputation Points: 1422
Solved Threads: 162
The Queen of DaniWeb
cscgal is offline Offline
13,645 posts
since Feb 2002
Jul 18th, 2004
0

Re: CSS center vertical

That is wonderful! I had never thought of using margins, thanks for that great example!

Let me see if I can try to explain it without making too much of a fool out of myself. When you specify where the top and left are going to be, in this example both were 50%, that means that the top-left pixel of your box will be 50% from the top and 50% from the left. But that means your area isn't going to be centered. The top-left pixel will be. By moving the margins back towards the left and top(with the negative numbers, a positive would move it farther from the top and left) half the length and width of the area you are actually moving it to exactly where you want, right in the center!

I hope that makes sense. Take care!
Reputation Points: 11
Solved Threads: 0
Light Poster
gooseneck is offline Offline
38 posts
since Jun 2004
Jul 18th, 2004
0

Re: CSS center vertical

Quote originally posted by gooseneck ...
half the length and width of the area
What area? The box you are trying to centre I assume?
Reputation Points: 115
Solved Threads: 7
Practically a Master Poster
Slade is offline Offline
633 posts
since Mar 2004
Jul 19th, 2004
1

Re: CSS center vertical

Yes that's right.
Basically we are moving the control point of the box to the center by telling it to use margins that are negative and half the width and height of the box. This means that when we position it 50% from left and top we are moving the center of the box to that position.
If you want to see how it works insert the lines of code one at a time, and watch how it changes it. First apply your dimensions, then your negative margins. then put your positioning in. That's how I figured it out the first time Ryan showed me. I actually have a demo built into one of my very early attempts at web design: http://www.emdevelopments.co.uk/tollgate/first/

Hopefully that's a little clearer? Maybe? Maybe Not?

BTW, don't worry too much if negative margins has you baffled. I still don't get Ryan's latest http://www.alistapart.com/articles/negativemargins/
Reputation Points: 54
Solved Threads: 20
Master Poster
DaveSW is offline Offline
765 posts
since Jul 2004
Jul 30th, 2004
0

Re: CSS center vertical

Dave, thanks for this info. Just saved me! And great link to that alistapart site, just printed it out and saved it in my "Red Book of Knowledge" (where I put all the crap I want to remember..)
Moderator
Reputation Points: 322
Solved Threads: 28
The C# Man, Myth, Legend
Tekmaven is offline Offline
914 posts
since Feb 2002

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: connection between linkbutton and map
Next Thread in HTML and CSS Forum Timeline: Highlighting a line with BG color





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC