Thread: Center a DIV

    #1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    721
    Rep Power
    7

    Center a DIV


    Wow. I thought this would be easy. Put something in the middle... *shrugz* Well, I currently have it horizontally centered via HTML's 'align="center"' and vertically centered via CSS's 'vertical-align: middle;'

    It appears in IE10 and Chrome so far, the HTML align attribute is being dismissed, and text-align: center; does not work.

    Basic layout of my site:
    Code:
    <BODY>
      <TABLE style="vertical-align: middle;">
        <TR>
          <TD align="center">
            <TABLE>
              ...
            </TABLE>
          </TD>
        </TR>
      </TABLE>
    </BODY>
    The outter table meerly builds the theme borders around a center cell which contains the loaded module. Need the outter table centered both horizontally/vertically. Thanks for any help.

    EDIT: Whoa. Now noticed I am using 3 tables. Outer only has one cell, meerly for the table itself to exist and be centered. Inner then defines borders/theme, and inner-most to with-hold the content. Wow do I need to clean up. Any help on centering a main container on newer browsers is still greatly appreciated. Thank you.
    Last edited by Triple_Nothing; August 31st, 2013 at 12:22 AM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    276
    Originally Posted by Triple_Nothing
    Any help on centering a main container on newer browsers is still greatly appreciated. Thank you.
    Easiest way I know is by using a wrapping DIV to surround everything and give it the following CSS[may need tweaking]
    Code:
    div#wrapper{
    width:/*give width that you need to enclose the table(s)*/;
    overflow:auto;/*to enclose everything thats inside it(in case anything is floated)*/
    margin:0 auto; /*to center the div horizontally*/
    text-align:center;/*sometimes for IE to center horizontally*/
    }
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    721
    Rep Power
    7
    Well, I find many places that mention as you did. The biggest issue here is that I cannot define a height or width. The size changes par page.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    276
    To my knowledge, the only way to center [other than trying to use the old deprecated <center> tag] is using margin:0 auto, but that requires a width to be set.

    I hate to suggest this, but, have you tried using the <center> tag around your table? (dunno if its still available)
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Hold your tongue! I'm shocked! You suggest a long obsolete element instead of summoning me?

    Anyway seriously, if you don't need to support IE7 and older, you can use a few <div>s with "display:table" and "display:table-cell" to do this. (And for IE6-7 there are two other ways to do it in them.)

    Here's an old demo on my site that I really should have updated over a year ago (with the better way to do it in IE7, which is a variation on the technique shown in the demo by Gary Turner):
    http://www.dynamicsitesolutions.com/...nd-vertically/

    Here are some other articles on this:
    http://gtwebdev.com/workshop/vcenter...inline-css.php
    http://css-tricks.com/centering-in-the-unknown/
    http://www.thecssninja.com/xhtml/why...e-frowned-upon
    http://www.hughlashbrooke.com/two-me...tering-in-css/

    Originally Posted by Triple_Nothing
    It appears in IE10 and Chrome so far, the HTML align attribute is being dismissed, and text-align: center; does not work.
    You may need to use auto left and right margins to center block level elements within the "cell".

    Originally Posted by DonR
    To my knowledge, the only way to center [other than trying to use the old deprecated <center> tag] is using margin:0 auto, but that requires a width to be set.
    You haven't read this: Four ways to Center Elements with CSS?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    276
    Originally Posted by Kravvitz
    Hold your tongue! I'm shocked! You suggest a long obsolete element instead of summoning me?
    I know it, ...what was I thinking?

    Originally Posted by Kravvitz
    You haven't read this: Four ways to Center Elements with CSS?
    Unfortunately not, .......I will, however, bookmark that article and keep for a reference for "in the future". thanks.

IMN logo majestic logo threadwatch logo seochat tools logo