Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Posts
    41
    Rep Power
    15

    css and table alignment


    curious, how to get a table to align in a horizontal manner using css...with html you would just

    <table align="center">

    but, i tried

    table {align: center;}

    to no avail, ive looked some things up and it appears that's not valid...

    any ideas aside from hard coding it into the html?
  2. #2
  3. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1099
    Code:
    table
      {
      margin-left: auto;
      margin-right: auto;
      }
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Posts
    41
    Rep Power
    15
    just tried your solution, still defaulted to the left...
  6. #4
  7. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Posts
    41
    Rep Power
    15
    k, thanks -- will give it a try in a few

    **hrm, that doesnt work either -- im not sure what's goin on but im not liking it...**
    Last edited by ROT; June 5th, 2003 at 10:54 AM.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Posts
    41
    Rep Power
    15
    maybe because that was for centering text and im trying to center a table
  12. #7
  13. Senior Polecat
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    Jersey (the original version)
    Posts
    210
    Rep Power
    12

    Lightbulb


    actually, adios was right,

    to center a table you need to contain it within a DIV which has text-align: center applied to it ... and bob's your fathers brother

    so:

    <style>
    div.centerinner {
    text-align: center;
    }
    </style>

    ...

    <div class="centerinner">
    <table>
    <tr>
    <td> </td>
    <tr>
    </table>
    </div>

    should produce the effect you are after ... unless you're using some weird browser combination I'm not aware of!

    Icy
    Quidquid latine dictum sit, altum viditur.

    http://www.XSet.co.uk
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Posts
    41
    Rep Power
    15
    im an idiot, pft...

    style code:

    div#content {text-align: center;}

    html code:

    <div id="content">
    </div>

    had my text-align left instead of center

    showing myself again to check the basics first...

    **well, problem with this is it aligns any untagged text center also. so you either have to tag the text left or find a diff way**
    Last edited by ROT; June 5th, 2003 at 11:29 AM.
  16. #9
  17. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Just override the 'outer' alignment with specific CSS applied to the nested element(s) involved. No extra charge.
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Posts
    41
    Rep Power
    15
    not sure what you just said
  20. #11
  21. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Notice this...

    .outerCenter {
    text-align: center;
    }

    .innerCenter {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    }

    ...from the example I posted? Because the left-aligning rule is more specific ('closer' to) any contained text, it over-rides the text-align rule in the outer container. Try it.
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Posts
    41
    Rep Power
    15
    ah, i see what you're saying... ya, i already got it taken care of due to the fact the titlebar and content sections of the table were already id'd
  24. #13
  25. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2002
    Location
    Queensland, Australia
    Posts
    827
    Rep Power
    141
    This is driving me nuts. I've seen how setting the left and right margins can be used to horizontally centre something. And IE6 correctly renders it when I view these pages that do it. But for some reason it doesn't work when I try it on my own pages. Here's my code...

    Code:
    <style type="text/css">
    <!--
    #content-area {
    	padding : 10px 20px 20px 20px;
    }
    
    #content-area div.diagram {
      width : 50%;
    	border-top : 2px solid Black;
    	border-bottom : 2px solid Black;
    	padding-top : 10px;
    	margin : 0px auto;
    }
    
    div.diagram span.caption {
    	border-top : 1px solid Black;
    	display : block;
    	margin-top : 10px;
    	font-size : smaller;
    	width : 100%;
    }
    -->
    </style>
    </head>
    
    <body>
    
    <div id="content-area">
    
    <div class="diagram">
    		<img src="images/image.gif" width="300" height="200" /><br />
        <span class="caption"><strong>Figure 1:</strong> Lorem ipsum dolor sit amet, 
        consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
        dolore magna aliquam erat volutpat.</span>
    	</div>
    
    </div>
    
    </body>
    This works in Opera but not in IE6 and I can't work out why. I know IE6 supports this use as this same method is used on http://www.alistapart.com/stories/practicalcss/ and it renders perfect.

    Any ideas what I'm doing wrong?

    Note: I have tried different ways of setting the left and right margins but it never make any difference. I also know an alternative method to centre it by giving diagram a pixel width and a negative sized margin but I really want a percentage width
    Ooh, they have the Internet on computers now!
  26. #14
  27. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1099
    Code:
    #content-area
      {
      padding : 10px 20px 20px 20px;
      text-align: center; /* IE support */
      }
  28. #15
  29. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2000
    Posts
    763
    Rep Power
    0
    Yes, IE does not support the margin: auto; property correctly.
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo