Connecting Tech Pros Worldwide Forums | Help | Site Map

How do I center align a Div in my Stylesheet?

Viken Karaguesian
Guest
 
Posts: n/a
#1: Jul 21 '05
Hello all,

I'm trying to create a Div style for a website that I'm playing around
with.

I'd like the DIV itsself to be center-aligned, but the text within the
div to be left-aligned. My div style looks like this:

div.main { width: 460; height: auto; text-align: left }

I've tried working other commands in there like:
"align: center" and "position: center" but have not been able to
acheive what I want. How can this be accomplished?

Thanks.


Els
Guest
 
Posts: n/a
#2: Jul 21 '05

re: How do I center align a Div in my Stylesheet?


Viken Karaguesian wrote:
[color=blue]
> Hello all,
>
> I'm trying to create a Div style for a website that I'm playing around
> with.
>
> I'd like the DIV itsself to be center-aligned, but the text within the
> div to be left-aligned. My div style looks like this:
>
> div.main { width: 460; height: auto; text-align: left }
>
> I've tried working other commands in there like:
> "align: center" and "position: center" but have not been able to
> acheive what I want. How can this be accomplished?[/color]

For IE5 you need to set text-align:center on the parent element, for
standards compliant browsers (and IE6 with a doctype) you need to set
the left and right margin of the div to equal sizes. This may be a
percentage, a fixed width, or just "auto". In your case, auto seems
the right way.

http://locusmeus.com/html-css/centeringpage.html

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Specials - Too much too young
Nathan
Guest
 
Posts: n/a
#3: Jul 21 '05

re: How do I center align a Div in my Stylesheet?


#divsid { margin: auto 33% auto 33% }

put's it right about center.

DU
Guest
 
Posts: n/a
#4: Jul 21 '05

re: How do I center align a Div in my Stylesheet?


Nathan wrote:
[color=blue]
> #divsid { margin: auto 33% auto 33% }
>
> put's it right about center.
>[/color]

What you do is define, squeeze the content within 34% of the parent
element's width. That's not how to best center an element.

"if both 'margin-left' and 'margin-right' are 'auto', they will be set
to equal values. This will center the element inside its parent."
CSS1 horizontal formating
http://www.w3.org/TR/REC-CSS1#horizontal-formatting

#divsid { margin-left: auto; margin-right: auto; text-align: left;}

Auto value means to take as much as you can once the content has been
rendered. So, maybe the content will use 90% of the parent's width,
leaving 5% for left and right margin, not 34%.

DU
--
The site said to use Internet Explorer 5 or better... so I switched to
Mozilla 1.7.6 :)
David Dorward
Guest
 
Posts: n/a
#5: Jul 21 '05

re: How do I center align a Div in my Stylesheet?


Viken Karaguesian wrote:

[color=blue]
> I'd like the DIV itsself to be center-aligned, but the text within the[/color]

http://dorward.me.uk/www/centre/#block
[color=blue]
> div.main { width: 460; height: auto; text-align: left }[/color]

The width property takes a length, not an integer (hint - units are required
for lengths other then zero).

The validator would have picked this up.
[color=blue]
> I've tried working other commands in there like:
> "align: center" and "position: center"[/color]

There is no align property and "center" is not one of the accepted values
for the position property. The validator would have picked this up too, as
would RTFMing.

http://www.w3.org/TR/CSS2/


--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Closed Thread