Trying to center align

Discussion in 'HTML' started by paul j, Dec 21, 2004.

  1. paul j

    paul j Guest

    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?
    --
    Up from Third Base to Huntington
    They sang another victory song...........
     
    paul j, Dec 21, 2004
    #1
    1. Advertising

  2. paul j schrieb:
    > 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
    ---
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Dec 21, 2004
    #2
    1. Advertising

  3. paul j

    Richard Guest

    paul j wrote:

    > 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?
    > --
    > Up from Third Base to Huntington
    > They sang another victory song...........



    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.
     
    Richard, Dec 21, 2004
    #3
  4. paul j

    Oli Filth Guest

    DIV.container
    {
    text-align: center;
    }

    should do the trick.

    Oli

    paul j wrote:
    > 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?
     
    Oli Filth, Dec 21, 2004
    #4
  5. paul j wrote:
    > 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?


    See <URL:http://dorward.me.uk/www/centre/>.

    > 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.
     
    Leif K-Brooks, Dec 21, 2004
    #5
  6. paul j

    Richard Guest

    Oli Filth wrote:

    > DIV.container
    > {
    > text-align: center;
    > }


    > should do the trick.


    It's been deprecated. Please keep up with the changes.
     
    Richard, Dec 21, 2004
    #6
  7. paul j

    Richard Guest

    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?
     
    Richard, Dec 21, 2004
    #7
  8. paul j

    Neal Guest

    On Tue, 21 Dec 2004 15:32:24 -0600, Richard <Anonymous@127.001> wrote:

    > 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.
     
    Neal, Dec 21, 2004
    #8
  9. paul j

    Neal Guest

    On Tue, 21 Dec 2004 15:34:30 -0600, Richard <Anonymous@127.001> wrote:

    > 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. :p
     
    Neal, Dec 21, 2004
    #9
  10. paul j

    Oli Filth Guest

    Richard wrote:
    > Oli Filth wrote:
    >
    >
    >>DIV.container
    >>{
    >> text-align: center;
    >>}

    >
    >
    >>should do the trick.

    >
    >
    > 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
     
    Oli Filth, Dec 21, 2004
    #10
  11. paul j

    Toby Inkster Guest

    paul j wrote:

    > #container {
    > margin: auto ;
    > }
    >
    > But it isn't centered. What am I doing wrong?


    Have you set a width?

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Dec 22, 2004
    #11
  12. paul j

    Andy Dingley Guest

    On Tue, 21 Dec 2004 09:17:12 -0600, "Richard" <Anonymous@127.001>
    wrote:

    >Now investigate what padding does to content.


    And you were doing _so_ well up to that point.
     
    Andy Dingley, Dec 22, 2004
    #12
  13. paul j

    Sid Ismail Guest

    On Tue, 21 Dec 2004 16:51:16 -0500, Neal <> wrote:

    : On Tue, 21 Dec 2004 15:32:24 -0600, Richard <Anonymous@127.001> wrote:
    :
    : > 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
     
    Sid Ismail, Dec 22, 2004
    #13
  14. paul j

    Henry Guest

    Don't you think it's VERY stupid!?

    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.
     
    Henry, Dec 22, 2004
    #14
  15. Re: Don't you think it's VERY stupid!?

    Henry schrieb:
    > 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
    ---
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Dec 22, 2004
    #15
  16. paul j

    Steve Pugh Guest

    Re: Don't you think it's VERY stupid!?

    On Wed, 22 Dec 2004 20:21:28 +0800, Henry <>
    wrote:

    >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
     
    Steve Pugh, Dec 22, 2004
    #16
  17. paul j

    Henry Guest

    Re: Don't you think it's VERY stupid!?

    Steve Pugh wrote:
    > On Wed, 22 Dec 2004 20:21:28 +0800, Henry <>
    > wrote:
    >
    >
    >>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





    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.

    :)
     
    Henry, Dec 22, 2004
    #17
  18. paul j

    paul j Guest

    On Wed, 22 Dec 2004 00:30:03 +0000, Toby Inkster wrote:

    > paul j wrote:
    >
    >> #container {
    >> margin: auto ;
    >> }
    >>
    >> But it isn't centered. What am I doing wrong?

    >
    > Have you set a width?


    That was it, thanks!
    --
    Up from Third Base to Huntington
    They sang another victory song...........
     
    paul j, Dec 22, 2004
    #18
  19. paul j

    Oli Filth Guest

    Sid Ismail wrote:
    > On Tue, 21 Dec 2004 16:51:16 -0500, Neal <> wrote:
    >
    > : On Tue, 21 Dec 2004 15:32:24 -0600, Richard <Anonymous@127.001> wrote:
    > :
    > : > 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
     
    Oli Filth, Dec 22, 2004
    #19
  20. paul j

    kchayka Guest

    Sid Ismail wrote:
    >
    > I _know_ that <center> is deprecated. But
    > <div align="center">?


    The "align" attribute is also deprecated.

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Dec 22, 2004
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kay
    Replies:
    2
    Views:
    7,228
  2. VB Programmer

    Question: TextBox - Can't Align Center

    VB Programmer, Aug 27, 2003, in forum: ASP .Net
    Replies:
    3
    Views:
    16,538
    Grant
    Aug 27, 2003
  3. tshad

    text-align vs align

    tshad, Jun 23, 2005, in forum: HTML
    Replies:
    1
    Views:
    1,325
    David Dorward
    Jun 23, 2005
  4. Paul Lautman

    left align within centre align

    Paul Lautman, Mar 3, 2006, in forum: HTML
    Replies:
    3
    Views:
    597
    Paul Lautman
    Mar 3, 2006
  5. Steve Richter
    Replies:
    1
    Views:
    938
    Mark Rae
    Jun 24, 2007
Loading...

Share This Page