SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to centre/center text?

    I was asked the best way to do this, and by way of response, I put a page together:

    http://home.clara.net/ianlloyd/tools/centering-text.htm

    There are probably loads of other ways - can you suggest other ways to do this?

    PS - Do youthink I've got the order right in terms of preference?
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  2. #2
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your method of centering a DIV (as used in Example 2, and the centered LI example) is invalid CSS and will only actually center in IE.

    Try using valid CSS. That is, specify a width, and declare auto margins on the left and right.
    ----Adopt-a-Sig----
    Your message here!

  3. #3
    Degrading Gracefully PalmerB's Avatar
    Join Date
    Sep 2001
    Location
    Ohio - U.S.A. Outlook: Cautiously Optimistic
    Posts
    3,283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You asked for other options so here's one. You could put a class in your style sheet called "center"...

    Code:
    .center {text-align: center}
    Then refer to it in your tags but this example does not use the <div> tag like in your example...
    Code:
    <p class="center">Centered text goes here</p>
    Another tag...
    Code:
    <table>
    <tr><td class="center">Text is centered in the cell here</td></tr>
    <table>
    Somebody correct me if this is wrong, invalid, or incompatible with certain browsers

    Regarding the order of preference, looks fine to me but I would make a note that the <center> tag is deprecated and will unfortunately be phased out in future browsers.

    Palmer

    Palmer
    ps-You should put the code up as an example so people do not have to "view source" to see how it was done.

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by PalmerB
    the <center> tag is deprecated and will unfortunately be phased out in future browsers
    I think you mean "fortunately"...

  5. #5
    Degrading Gracefully PalmerB's Avatar
    Join Date
    Sep 2001
    Location
    Ohio - U.S.A. Outlook: Cautiously Optimistic
    Posts
    3,283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I meant fortunately

    But seriously though haven't you just loved being able to put a quick <center> tag around something every once in awhile? I hand code so going through the <div align="center"> is too much typing for a lazy guy.

    Ahh the center tag oh how I'll miss your sweet simplicity but alas we must plod forward into the future known as css.



    Palmer (excuse the excess emoticonization of this post)

  6. #6
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by PalmerB
    I hand code so going through the <div align="center"> is too much typing for a lazy guy.
    Lucky you, that's invalid too in HTML 4.1 Strict and up. You can cut out up eight charters, so there's really no need to do all that typing... ;-)

    Anyway, the standards weren't really designed with space in mind, but they do cut down on it because you're not faced with the redundancies that the browser wars had left in its wake.

    ~~Ian
    Last edited by Ian Glass; Sep 27, 2002 at 18:45.

  7. #7
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by randem
    Your method of centering a DIV (as used in Example 2, and the centered LI example) is invalid CSS and will only actually center in IE.

    Try using valid CSS. That is, specify a width, and declare auto margins on the left and right.
    You know, I forgot to mention - the person asking was an absolute beginner, and I purposely avoided going too deep with CSS - they didn't even know HTML yet! In addition, the person asking is on an Intranet team, developing for IE 5 only. I thought it was best to keep things as simple as possible for starters - too much science not good at that stage, but you are right, it should include those attributes.
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  8. #8
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by lloydi
    You know, I forgot to mention - the person asking was an absolute beginner, and I purposely avoided going too deep with CSS - they didn't even know HTML yet! In addition, the person asking is on an Intranet team, developing for IE 5 only. I thought it was best to keep things as simple as possible for starters - too much science not good at that stage, but you are right, it should include those attributes.
    <rant>
    Coding for IE is never an acceptable excuse for shrugging off standards. In fact, were you aware that starting in IE6, there is a standards-mode/quirks-mode, the same as in Mozilla, and by simply adding a <!DOCTYPE> it will still break that code?

    When it's wrong, it's wrong. If you are really trying to help your friend, you will show him what's right.
    </rant>
    ----Adopt-a-Sig----
    Your message here!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •