Tech Off Thread

25 posts

XHTML Compliant Alternative to <div align="center">

Back to Forum: Tech Off
  • User profile image
    jsampsonPC

    I keep getting "warnings" from VS2005 that <div align="center"> is not suggested anymore, but other than surrounding elements with <center> tags, I don't know of another way to center child elements in a div.

    Text-align: center will work, but only for text...

    Anybody know of a standards-compliant alternative?

  • User profile image
    W3bbo

    text-align: center; does the same thing as <center> or <div align="center">. What behaviour are you missing?

  • User profile image
    jsampsonPC

    In the following example, if you applied "Text-Align: Center;" to the ParentContainer id, it would center the text, but not the child-table.

    I'm looking for the traditional effect of centering everything one-level deep with <div align="center" id="ParentContainer". You can still get an effect similar, by setting auto margins to the #tabularData object, so I think I may go that route.

    <div id="ParentContainer">
       
        <p>This is a paragraph in the first container.</p>

        <table id="tabularData">
           <tbody>
              <tr>
                 <td>Name:</td>
                 <td>Age:</td>
              </tr>
           </tbody>
        </table>

    </div>

  • User profile image
    Antitorgo

    W3bbo is wrong (amazing, I know) - text-align will only center text, it doesn't affect img tags or anything.

    <div style="margin: auto">

    is the standards way of centering a div.

  • User profile image
    Adrian​JMartin

    Your example code works fine - both table and p are centered

    does your real life code wrap the table in another layout and has that layout got a different align set?

    <head>
        <title>Untitled Page</title>
        <style type="text/css">
        #ParentContainer
        {
            Text-Align:Center;
        }
        #sub
        {
            Text-Align:left;
       
        table
        {
            Text-Align:right;background-color:red
        }
        </style>
    </head>
    <body>
        <div id="ParentContainer" >
            <p>
                This is a paragraph in the first container.</p>
            <div id="sub">
                <table id="tabularData">
                    <tbody>
                        <tr>
                            <td>
                                Name:</td>
                            <td>
                                Age:</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
    </html>

  • User profile image
    Matthew van Eerde

    Antitorgo wrote:
    text-align will only center text, it doesn't affect img tags or anything.


    Well, technically, text-align affects inline elements. img tags are "inline" (as opposed to blocks) so it will affect img tags.  But table, div, p, etc. are block elements, so it won't affect those.

  • User profile image
    Sven Groot

    Margin:auto is indeed the correct way of doing it. Note that you need to set margin:auto on the element you want centered, not on the element containing the elements that should be centered.

    Margin:auto also doesn't work on IE5.x and earlier (don't know if that's important to you).

  • User profile image
    W3bbo

    Antitorgo wrote:
    W3bbo is wrong (amazing, I know) - text-align will only center text, it doesn't affect img tags or anything.


    Wrong. As Maurits correctly states, text-align affects all inline elements, including the img element (and it's text-align:; not Text-Align; )

    "margin: auto;" doesn't semantically mean to center something, it just zeros the top and bottom margins, and defaults the left and right margins to the same value ("filling" unused space), it just so happens that it centers things.

    Antitorgo wrote:
    <div style="margin: auto"> is the standards way of centering a div.


    There are no web "standards", they're Technical Recommendations and Specifications, there were only a few web Standards (and they were long ago, back when the IETF was in charge). And even then, the W3C doesn't recommend using inline styles Smiley

  • User profile image
    stevo_

    Personally I use margin: 0px Auto and text-align: center on its parent, just to make sure.

  • User profile image
    Sven Groot

    stevo_ wrote:
    Personally I use margin: 0px Auto and text-align: center on its parent, just to make sure.

    FYI: you don't have to specify a unit when you use 0. Just margin: 0 auto will do.

  • User profile image
    jsampsonPC

    Sven Groot wrote:
    
    stevo_ wrote:Personally I use margin: 0px Auto and text-align: center on its parent, just to make sure.

    FYI: you don't have to specify a unit when you use 0. Just margin: 0 auto will do.


    You "nerds" and your technicalities Wink

  • User profile image
    Sven Groot

    jsampsonPC wrote:
    
    Sven Groot wrote: 
    stevo_ wrote: Personally I use margin: 0px Auto and text-align: center on its parent, just to make sure.

    FYI: you don't have to specify a unit when you use 0. Just margin: 0 auto will do.


    You "nerds" and your technicalities

    If you want to get really technical, since the computed value of "auto" for margin-top and margin-bottom is 0, just "margin:auto" actually has precisely the same effect as "margin: 0 auto". Tongue Out

  • User profile image
    stevo_

    Well personally I avoid misinterpretation by marking up like that, I always ensure I provide units if I'm giving numic values, and while the Auto is generally true, I always tend to use 0px Auto because its reassuring to me that the design is interpretted correctly under as many conditions as possible.

  • User profile image
    ewschone

    Usually I put this in the style sheet

    .centered
    {
     margin-left:auto;
     margin-right:auto;
    }

    and then use <div class="centered"></div> around the stuff that needs to be centered Smiley.

  • User profile image
    W3bbo

    stevo_ wrote:
    I always tend to use 0px Auto because its reassuring to me that the design is interpretted correctly under as many conditions as possible.


    *stunned silence*

    there isn't a single UA out there that fails to recognise "0" with or without a unit as "zero".

  • User profile image
    stevo_

    Well I guide myself on w3c's recommendations, and whenever they markup pixel measurements, they ensure its stated explicitely. There may or may not be a reason for this- but without trying to be offensive, I trust their guidelines more than yours, and as I said- its reassuring for me that I am telling the browser exactly what I mean and only needing to add two characters to the measurement.

  • User profile image
    W3bbo

    stevo_ wrote:
    Well I guide myself on w3c's recommendations, and whenever they markup pixel measurements, they ensure its stated explicitely. There may or may not be a reason for this- but without trying to be offensive, I trust their guidelines more than yours, and as I said- its reassuring for me that I am telling the browser exactly what I mean and only needing to add two characters to the measurement.


    Where do they state to use pixel measurements explicitly?

    ...and the W3C and the rest of the world actually recommends against using pixel measurements, since they don't scale well for non-traditional devices.

  • User profile image
    stevo_

    All their markup examples use px, and I think your getting confused because- margin: 0 auto; is the same as margin: 0px auto (although my point is not trusting the default). So regardless- I've been doing CSS for years, and I'm sure I understand it well enough. The concerns with px are that it doesn't scale- but some if not all designs are dependant at most point on having measurements to be pixel perfect, and IE does scale pixel measurements on fonts anway.

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.