/    Sign up×
Community /Pin to ProfileBookmark

CSS to center layer

Copy linkTweet thisAlerts:
Sep 28.2004

Hi all

I have a layer and I’m needing it to be in the exact center of the page at whatever resolution or browser size. all the layers attrabutes are set in the style tag like this:

[code=php]
#main {
position:absolute;
overflow: visible;
left: 10%;
width: 763px;
height: 524px;
top: 30px;
visibility: visible;
}
[/code]

Any ideas

Chris

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@BonRougeSep 28.2004 — body { margin : auto; text-align:center;}
Copy linkTweet thisAlerts:
@Paul_JrSep 28.2004 — [font=palatino linptype]The [i]margin: auto;[/i] should be applied to the element to be centered; the [i]text-align: center;[/i] applied to the BODY is to make IE 5.x play nice; the element to be positioned must have a width defined; absolute positioning will override the [i]margin: auto;[/i].[/font]
Copy linkTweet thisAlerts:
@ShmohelSep 29.2004 — if you want it to be exactly centered then why are you making position:absolute?

[CODE]margin: x auto x auto;[/CODE]

replace the x's with any necessary top and bottom margins, but this will center block elements.
Copy linkTweet thisAlerts:
@cybercampbellauthorSep 29.2004 — I did this:

#main {

margin: 30 auto 0 auto;

text-align:center;

overflow: visible;

height: 524px;

visibility: visible;

}

but the margin: 30 auto doesn't work in Firefox, it works fine in IE.

Any ideas?

Cheers

Chris
Copy linkTweet thisAlerts:
@ShmohelSep 29.2004 — can you post a link?
Copy linkTweet thisAlerts:
@ajimenezSep 29.2004 — [B]if you want it to be exactly centered then why are you making position:absolute?[/B][/QUOTE]
I just posted a thread basically asking the same thing. The reason I have the div positioned absolutely is because it's layered, I need to have the z-index in there.
[CODE]
div#box {
position: absolute;
left: 300px
right: 300px;
text-align: center;
border: 2px solid red;
z-index: 20;
}[/CODE]
Copy linkTweet thisAlerts:
@ShmohelSep 29.2004 — send me a link....i can help you out.
Copy linkTweet thisAlerts:
@Paul_JrSep 30.2004 — [i]Originally posted by cybercampbell [/i]

[B]I did this:



#main {

margin: 30 auto 0 auto;

text-align:center;

overflow: visible;

height: 524px;

visibility: visible;



}



but the margin: 30 auto doesn't work in Firefox, it works fine in IE.



Any ideas?



Cheers

Chris [/B][/QUOTE]
[font=palatino linotype]Two things: the element must have a width defined or else the margin will do nothing, and you need a unit identifier (px, em, ex, pt, pc, ect.) for any non-zero value.[/font]
×

Success!

Help @cybercampbell 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 6.16,
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: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

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