Trying to center align

[paul j]

I had <div align="center"> around all of my content but just found out
that's deprecated.

So I tried the following:

#container {
margin: auto ;
}

with:

<div id="container">

But it isn't centered. What am I doing wrong?

Also, what is the difference between using ".", "#" and no character next
to each CSS element?

 

[Bernhard Sturm]

I had <div align="center"> around all of my content but just found out
that's deprecated.

So I tried the following:

#container {
margin: auto ;
}

with:

<div id="container">

But it isn't centered. What am I doing wrong?

you need to define which margin you want to center
there are very good resources out there. check out:

http://www.porjes.com/center.html

(I googled a bit to find this.. it's just one of the many examples out
there
BTW: CSS vertical centering is not quite easy to achieve

Also, what is the difference between using ".", "#" and no character next
to each CSS element?

.. refers to a class of a CSS rule. classes can be used as many time in
your document.
# refers to an ID of a CSS rule. IDs can be used only once in your document.

HTH

bernhard

 

[Richard]

I had <div align="center"> around all of my content but just found out
that's deprecated.

So I tried the following:

#container {
margin: auto ;
}

<div id="container">

But it isn't centered. What am I doing wrong?

Also, what is the difference between using ".", "#" and no character next
to each CSS element?

div.master
div#master

<div class="master">
<div id="master">
The period designates a class while the # designates an "ID".
Both may be used, but an "ID" can only be used once within the document.
If you need to use the same styled division several times, use class.

Now investigate what padding does to content.

 

[Oli Filth]

DIV.container
{
text-align: center;
}

should do the trick.

Oli

 

[Leif K-Brooks]

I had <div align="center"> around all of my content but just found out
that's deprecated.

So I tried the following:

[...]

But it isn't centered. What am I doing wrong?

Also, what is the difference between using ".", "#" and no character next
to each CSS element?

With CSS, this:

p {
color : red;
}

Will turn all of these elements red:

<p>I'm red!</p>
<p class="foo">AOL: Me too!</p>
<p id="bar">Red is a nice color!</p>

But not these:

<div>I want to be red!</div>
<div class="bar">Aww, why do I have to be the stupid default color?!</div>

Whereas this:

..foo {
color : green;
}

Will turn these elements green:

<div class="foo">I'm green!</div>
<p class="foo">Green eggs and ham!</p>

But not these:

<p class="bar">I'm... not... green with envy!</p>
<div>Aww, I want to be green!</div>

This CSS:

#foo {
color : blue;
}

Will turn this element blue:

<p id="foo">No one else is blue too!</p>

But not these:

<p id="bar">No blue for me!</p>
<p>Ditto!</p>

So what's the difference between using an ID and using a class? The same
class can be used multiple times in a document (so you can have more
than one <p class="foo"> element in the same document), but IDs are
unique within a given document. An ID can also be used to identify
elements for things besides stylesheets (scripts, fragment identifiers,
etc.), whereas classes are pretty much only used for CSS.

 

[Richard]

DIV.container
{
text-align: center;
}

should do the trick.

It's been deprecated. Please keep up with the changes.

 

[Richard]

Leif K-Brooks wrote nothing intelligent:

Someone needs more eggnogg for better comprehension.
Either that , or you've had to much.
Wanna pass some around?

 

[Neal]

It's been deprecated. Please keep up with the changes.

See <http://www.w3.org/TR/CSS21/text.html#propdef-text-align> please and
show us where this is deprecated.

 

[Neal]

Leif K-Brooks wrote nothing intelligent:

Huh?

Leif gave a thorough discussion of how classes and ids work, and a link
for centering help. I think his reply was very well thought out.

Someone needs more eggnogg for better comprehension.
Either that , or you've had to much.
Wanna pass some around?

You may not have any of my eggnog.

 

[Oli Filth]

Oli Filth wrote:




It's been deprecated. Please keep up with the changes.

Where does it say that? Not in the W3C's CSS 2.1 spec, anyhow. So as far
as I'm aware, I am keeping up with the changes.

Oli

 

[Toby Inkster]

#container {
margin: auto ;
}

But it isn't centered. What am I doing wrong?

Have you set a width?

 

[Andy Dingley]

Now investigate what padding does to content.

And you were doing _so_ well up to that point.

 

[Sid Ismail]

:
: > Oli Filth wrote:
: >
: >> DIV.container
: >> {
: >> text-align: center;
: >> }
: >
: >> should do the trick.
: >
: > It's been deprecated. Please keep up with the changes.
:
: See <http://www.w3.org/TR/CSS21/text.html#propdef-text-align> please and
: show us where this is deprecated.


Yep, that's what I thought. I _know_ that <center> is deprecated. But
<div align="center">?

Sid

 

[Henry]

You have float right and left but not center.

To center something you have to scratch your head a lot and use some tricks.

With IE and Front Page I can center anything without any tricks!

Maybe MS is bad but I can center anything without any problems.

Just press the button and select - center.

Can someone tell me a reason, why to center something in css is such a
drama and people are asking so many question at alt.html?

And if is hard to center, who's fault it is?

Why to center pic is not as obvious as center of text?


Maybe the next thing they will design a car which will turn left or
right but to drive straight there would be a problem and most people
would have to ask, how to drive strait.

 

[Bernhard Sturm]

With IE and Front Page I can center anything without any tricks!

Maybe MS is bad but I can center anything without any problems.

Just press the button and select - center.

<irony>
hi hi hi.. I can even push a button and insert the <blink> tag! yesss!
</irony>

why should we care about standards, if everything is so easy in
frontpage m$?

Can someone tell me a reason, why to center something in css is such a
drama and people are asking so many question at alt.html?

And if is hard to center, who's fault it is?

Why to center pic is not as obvious as center of text?

because block elements behave different than inline elements...
(the original post asked for centering a block element)



bernhard

 

[Steve Pugh]

You have float right and left but not center.

It occasionally would be nice to flow content around both sides of an
element. It would also be nice to be able to flow content above and
below an element. But you're not really talking about floating in the
rest of the post so let's not go down that road.

To center something you have to scratch your head a lot and use some tricks.

There are simple methods to float block and inline items in CSS.
The only tricks needed are for IE5 which gets it wrong.

With IE and Front Page I can center anything without any tricks!

How do you know? What tricks are going on under the hood? If it's
centering in IE5 then it's either using deprecated code or a trick.

Maybe MS is bad but I can center anything without any problems.

Just press the button and select - center.

So what? A decent HTML/CSS editor could easily use the valid CSS
methods for centering and tie them to a single button.

Can someone tell me a reason, why to center something in css is such a
drama and people are asking so many question at alt.html?

And if is hard to center, who's fault it is?

It's not hard, but if you want to start pointing fingers:

Netscape's for inventing the crude <center>.

Microsoft for copying them.

The W3C for using the propertry name text-align rather than
inline-align.

The W3C for saying that <center> = <div align=center> = <div
style="text-align: center"> despite the fact that <center> has always
centered block level children as well, though as tables were the only
block level children with widths less than 100% in pre-CSS days the
problem wouldn't be as widespread if not for the next one...

Microsoft for making text-align apply to block level children.

Microsoft for not supporting margin: auto for several version.

People like you for not reading the specs.

Why to center pic is not as obvious as center of text?

It is. images and text are both inline elements and so text-align:
center works for both.

Steve

 

[Henry]

It occasionally would be nice to flow content around both sides of an
element. It would also be nice to be able to flow content above and
below an element. But you're not really talking about floating in the
rest of the post so let's not go down that road.




There are simple methods to float block and inline items in CSS.
The only tricks needed are for IE5 which gets it wrong.




How do you know? What tricks are going on under the hood? If it's
centering in IE5 then it's either using deprecated code or a trick.




So what? A decent HTML/CSS editor could easily use the valid CSS
methods for centering and tie them to a single button.




It's not hard, but if you want to start pointing fingers:

Netscape's for inventing the crude <center>.

Microsoft for copying them.

The W3C for using the propertry name text-align rather than
inline-align.

The W3C for saying that <center> = <div align=center> = <div
style="text-align: center"> despite the fact that <center> has always
centered block level children as well, though as tables were the only
block level children with widths less than 100% in pre-CSS days the
problem wouldn't be as widespread if not for the next one...

Microsoft for making text-align apply to block level children.

Microsoft for not supporting margin: auto for several version.

People like you for not reading the specs.




It is. images and text are both inline elements and so text-align:
center works for both.

Steve

You see... I don't want to be a parrot and I would love to understand.
Now I do.

Thank you very much for all info and Merry Xmass.

 

[paul j]

Have you set a width?

That was it, thanks!

 

[Oli Filth]

:
: > Oli Filth wrote:
: >
: >> DIV.container
: >> {
: >> text-align: center;
: >> }
: >
: >> should do the trick.
: >
: > It's been deprecated. Please keep up with the changes.
:
: See <http://www.w3.org/TR/CSS21/text.html#propdef-text-align> please and
: show us where this is deprecated.


Yep, that's what I thought. I _know_ that <center> is deprecated. But
<div align="center">?

Sid

Both <center> and align="center" are now deprecated. However,
style="text-align: center" is not. But as others have said, a more
appropriate name would be "inline-content-align: center".

Oli

 

[kchayka]

I _know_ that <center> is deprecated. But
<div align="center">?

The "align" attribute is also deprecated.