1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Centering text in XHTML

Discussion in 'HTML, Graphics & Programming' started by Longbow, 26 Mar 2006.

  1. Longbow

    Sgarrista

    Joined: 15 Jan 2004

    Posts: 9,485

    In HTML 4.01 Transitional you can center some text (horizontally and vertically) in the middle of the page. However i'm having troubles getting it to work with XHTML, if it's possible.

    Code:
    ...
    <style type="text/css">
    #moo { width: 100%; height: 100%; }
    </style>
    </head>
    <body>
    <table id="moo">
    <tr>
    <td align="center">
    Hello, this should be in the middle of the page.
    </td>
    </tr>
    </table>
    ...
    
    If I change the !DOCTYPE to HTML 4.01 Transitional, then the text becomes centered. But when I change the !DOCTYPE back to XHTML 1.1 then the text stays at the top of the page.

    Suggestions?
     
    Last edited: 26 Mar 2006
  2. toastyman

    Gangster

    Joined: 30 Dec 2005

    Posts: 421

    Simple... align="center" isn't valid in XHTML. You should use CSS instead.
    Also, you should use XHTML 1.0, as that page isn't being sent as XML.
     
  3. Sherbs

    Mobster

    Joined: 26 Nov 2003

    Posts: 4,654

    Location: Brentwood

    Code:
    <style type="text/css">
    #foo {
         text-align: center;
         position:absolute;
         margin:-100px 0px 0px -200px;
         top: 50%;
         left: 50%;
    }
    </style>
    </head>
    <body>
    
    <div id="foo">
    Hello, this IS in the middle of the page. Also, I am a naughty boy for using tables.
    </div>
    Any good?
     
  4. Longbow

    Sgarrista

    Joined: 15 Jan 2004

    Posts: 9,485

    That works great :)

    Thanks.
     
  5. Sherbs

    Mobster

    Joined: 26 Nov 2003

    Posts: 4,654

    Location: Brentwood

    Good :) Post if you have anymore troubles.
     
  6. Longbow

    Sgarrista

    Joined: 15 Jan 2004

    Posts: 9,485

    Ok then...


    I need an image along the top of the page that repeats across the screen.

    I also need an image doing the same along the bottom of the page.

    So i've used a table and 3 cells to achieve this. However when I check the XHTML at w3 it says it's invalid. Because of course i've use the height: 100%.

    I could use divs like shown above but how would I repeat the image using divs?
     
  7. punky_munky

    Mobster

    Joined: 17 Oct 2002

    Posts: 2,964

  8. Longbow

    Sgarrista

    Joined: 15 Jan 2004

    Posts: 9,485

    Tried that but it wasn't working. Forgot the width=100%.

    All done and fixed though now.

    Thanks.