|
| |
|
|
gorilla
Posts: 2974
From: Denmark
Status: offline
 |
Centring elements on screen - 3/16/2004 10:03:34
I get asked so often how to do this that I am making it a topic of its own. The text below is identical to the repsonse I've just given in another topic.
What's important are the margins so you can do one of two things:
For a three col layout I often do this:
.leftContainer {
position: absolute;
top: 100px;
left: 10%;
width: 15%;
text-align: left;
}
.rightContainer {
position: absolute;
top: 100px;
right: 10%;
width: 15%;
text-align: left;
}
.centerContainer {
margin-left: 19%;
margin-right: 19%;
border-top: thin dotted #999999;
border-right: thin dotted #999999;
border-bottom: thin dotted #999999;
border-left: thin dotted #999999;
margin-top:10px;
padding-left: 10%;
padding-right: 10%;
text-align: justify;
font-family: verdana, tahoma, sans-serif;
font-size: 1em;
padding-bottom: 10px;
}
Nobody says that there has to anything in the left and right columns btw and my main is often used just as a wrapper div for everything else.
If howver you want something dead centred in the screen then you have to do a tiny bit of simple arithmetic.
you have to know the element's exact height and width. So you're usings pixels as a measurement. Let us assume that you have an element of 300px by 500px
{
height: 300px;
width: 500px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -150px;
}
by giving it a negative margin equal to half the element's height and width you have it dead cented on the screen.
Lots of other things you can do but as I say it is how it relates to the rest of your page that is important and this approach or some variant thereof works well cross browser. Except for NN4.78 which has poor css support to put it mildly.
_____________________________
Mháircaish
Signature self-censored to protect the sensibilities of the thin-skinned  .
May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower
|
|
|
|
Peppergal
Posts: 2207
Joined: 9/20/2002
Status: offline
|
RE: Centring elements on screen - 3/16/2004 10:11:18
Thank you very much, Gorilla. I don't think it's been said often enough - your contributions to this forum are priceless.
Karen
_____________________________
Northeast PA / Poconos/ Lake Wallenpaupack Real Estate
wallenpaupacklakeproperty.com
Karen's Real Estate Blog
| |
|
|
|
d a v e
Posts: 4177
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: Centring elements on screen - 3/30/2004 12:19:56
or then you could use
{margin-left:auto;
margin-right:auto} for a dead centred block level element?!
or does this have complications for positioned elements?
_____________________________
David Prescott
Gekko web design
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
