SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    table and image alignment

    I have a table comprised of headings and images. I want to center the table on the page.

    My mark up is:

    HTML Code:
    <div class="txt_cntr">
    <table summary="This table shows two ways to go" class="hm_pg_img_table">
    <tr>
        <td><h2><a href="/custom.php" title="Guidance">Guidance</a></h2></td>
        <td><h2><a href="/basics.php" title="Do it yourself">Do it yourself</a></h2></td>
    </tr>
    <tr>
        <td><a href="/custom.php" title="Guidance"><img alt="Guidance" src="http://www.clickbasics.com/image_library/1064.jpg" /></a></td>
        <td><a href="/basics.php" title="Do it yourself"><img alt="Do it yourself" src="http://www.clickbasics.com/image_library/1074.jpg" /></a></td>
    </tr>
    </table>
    </div>
    My CSS is:
    Code:
    .txtcntr { 
    text-align: center; 
    }
    
    /* Removes border & collapses */
    table { 
        border-collapse : collapse;
        border-spacing : 0;
        }
        
    /* home page image table */
    .hm_pg_img_table {
        min-width: 425px;
        }
    Why is the table not centering within the div? What's the best way of making this happen? The url is: (removed)
    Last edited by paulcj2; Feb 7, 2009 at 12:40.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Try this

    Code:
    <div class="txt_cntr">
    <table summary="This table shows two ways to go" class="hm_pg_img_table">
    <tr>
        <td><h2><a href="/custom.php" title="Guidance">Guidance</a></h2></td>
        <td><h2><a href="/basics.php" title="Do it yourself">Do it yourself</a></h2></td>
    </tr>
    <tr>
        <td><a href="/custom.php" title="Guidance"><img alt="Guidance" src="http://www.clickbasics.com/image_library/1064.jpg" /></a></td>
        <td><a href="/basics.php" title="Do it yourself"><img alt="Do it yourself" src="http://www.clickbasics.com/image_library/1074.jpg" /></a></td>
    </tr>
    </table>
    </div>
    CSS
    Code:
    .txtcntr { 
    text-align: center; 
    width:600px;
    }
    
    /* Removes border & collapses */
    table { 
        border-collapse : collapse;
        border-spacing : 0;
        }
        
    /* home page image table */
    .hm_pg_img_table {
        width:425px;
        min-width: 425px;
       margin:0 auto;
        }
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did it. Thanks.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  4. #4
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oooops. Works in Firefox 3, but not in IE 6 or 7.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FYI, the reason why text-align:center doesn't centre your table is that it only applies to inline boxes (hence the name text align). Tables generate block-level boxes, which can be centred by specifying automatic horizontal margins (and a width, for non-table elements).

    I don't know why Ryan suggested setting width:600px for your div, but this will centre the table within that div (but not within the page). Remove the width declaration for .txtcntr if you want the table centred within the page.

    BTW, I don't know if it's a typo in your post, but you use class="txt_cntr" in your markup but the selector .txtcntr (without an underscore) in your CSS. IE will apply text-align even for block-level boxes, at least in quirks mode.

    Oh, and your border-spacing:0 declaration is redundant.There is no space between borders in the collapsing borders model.
    Birnam wood is come to Dunsinane

  6. #6
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.
    Works in Firefox 3, but not in IE 6 or 7.
    Turns out I had Google page optimizer code above the doctype, which was throwing IE into quirks mode. I removed that and now all is well.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Just put the width there to make sure it wouldn't fail. I didn't test that code. Your welcome

    Cheers.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •