#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2002
    Location
    t.o.
    Posts
    82
    Rep Power
    12

    centering text with css horizontally and vertically


    I've seen quite a few articles on CSS Layout Techniques and how tables are bad etc... so I thought I would give CSS another chance as far as page layout goes.

    I'm simply trying to center some text on a page both horizontally and vertically. Using tables I would use the following code:


    <html>
    <head>
    <title>center</title>
    </head>
    <body>
    <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td align="center" valign="middle">center this text</td>
    </tr>
    </table>
    </body>
    </html>



    With css ??? (this centers horizontally)

    <html>
    <head>
    <title>center</title>
    <style type="text/css">
    <!--
    .center {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    margin: auto;
    }
    -->
    </style>
    </head>
    <body>
    <div class="center">this is centered</div>
    </body>
    </html>

    I'm sure there has to be a simple solution but???



    I found these links might be of interest

    http://archivist.incutio.com/viewlist/css-discuss/11732
    http://lists.w3.org/Archives/Public/...7Nov/0147.html
  2. #2
  3. Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    19
    Rep Power
    0
    frankly, you might want to stick with your old reliable tables, which you may find will have more support cross-browser.

    afaik there is no sure-fire, reliable way to do this with css. if anyone knows of a way, please speak up.

    i think that the way that is officially recognized by the css2 spec is
    Code:
    .centered {
    __position: absolute;
    __top: 0;
    __right: 0;
    __bottom: 0;
    __left: 0;
    __width: 50%;
    __height: 50%;
    __margin: auto;
    }
    but...well, just try it across various browsers...

IMN logo majestic logo threadwatch logo seochat tools logo