Stupid CSS Positioning Question
So I'm trying to learn CSS layout stuff (replace tables, yada yada, cool stuff). Anyway, I'm trying to make a class whose text is always centered on the page. Is this possible? I can say:
position: absolute;
left: 50%;
It's the closest I've gotten, but that lines up the left side of the text with the center of the window. And I can't seem to get around it by adding an align = "center" in my div tag either, which even if it worked, would be far less than ideal.
And I can't just use a text-align because I want a background behind the text. The full class is:
.myClass
{
padding: 2px;
position: absolute;
text-align: center; /* Aligns within its own background. */
left: 10px; /* This is the line that I need to figure out. */
font-size: 8pt;
font-style: italic;
color: #AAAAAA;
background: #555555;
border: 1px solid #111111;
}
Any insight? Thanks.
position: absolute;
left: 50%;
It's the closest I've gotten, but that lines up the left side of the text with the center of the window. And I can't seem to get around it by adding an align = "center" in my div tag either, which even if it worked, would be far less than ideal.
And I can't just use a text-align because I want a background behind the text. The full class is:
.myClass
{
padding: 2px;
position: absolute;
text-align: center; /* Aligns within its own background. */
left: 10px; /* This is the line that I need to figure out. */
font-size: 8pt;
font-style: italic;
color: #AAAAAA;
background: #555555;
border: 1px solid #111111;
}
Any insight? Thanks.
Comments
text-align: center; - that is right.
then just put your background either in the <DIV> which surrounds the text, or the <P> to get it only behind the text?
maybe post the relevant HTML also so I can understand better?
http://bluerobot.com/web/css/center1.html
or
http://bluerobot.com/web/css/center2.html
though you might have to explain again what you're trying to achieve.
I have yet to find a method of centering that works *reliably* and efficiently in pure CSS.
Best of luck. Just thought I'd share.
position: absolute;
width:60%;
margin-right: 20%;
margin-left: 20%;
You might have to play with the percentages some, but this should be re-workable to most layouts.
I'll also note that the negative margins trick is the ONLY way to *vertically* center elements on a page, at least as far as I know. It would seem auto vertical margins should work the same way as horizontal ones... but they don't. Don't ask why.
What hurts even more is when you realize that IE Mac totally f*cks up this vertical centering method, making you put in stupid workarounds to cater to those who haven't moved to OS X/Safari..