SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to center align using CSS

    If align="center" is illegal in XHTML, how would one center align a table with CSS. I tried float: center; and text-align: center; and neither one works.

    Any ideas?

    Sketch
    Aaron Brazell
    Technosailor



  2. #2
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...from the "I like talking to myself" department ,

    the correct syntax is style="margin-left: auto; margin-right: auto;"



    Hope that helps someone.
    Sketch
    Aaron Brazell
    Technosailor



  3. #3
    Back in Action Winged Spider's Avatar
    Join Date
    Jun 2001
    Location
    outside my mind
    Posts
    900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or you could use this:

    Code:
    margin: 0px auto;


  4. #4
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's actually two ways to center stuff with CSS, but I prefer the first method over the second.

    Method 1: auto margins
    Method 2: negative margin

  5. #5
    busy Steelsun's Avatar
    Join Date
    Mar 2001
    Location
    Houston, Tejas; Future Capital of the World
    Posts
    2,474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all, that actually helps me also. I'm doing the deed and trying to learn CSS (by hand coding versus any WYSIWYG prog), and had not been able to center things right at different resolutions. Bluerobot is an informative site for this.
    Brian Poirier
    SunStockPhoto: Stock Photos, Fine Art Photos, Event Photography

  6. #6
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or, for an even shorter rout, use:
    Code:
    margin: auto;

  7. #7
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, Ian, that will set all margins to auto, which has no effect on top and bottom margins (at least not in current browsers), thus effectively centering a block-level element.
    Last edited by mattjacob; Mar 24, 2002 at 02:12.

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, same question just that i have never used CSS before.
    I have this code
    Code:
    <div id="Layer1" style="position:absolute; left:159px; top:38px;'(not a break in real code)' 
    width:704px; height:435px; z-index:1;"> 
      <center><img src="logo3.jpg" width="200" height="50"></CENTER><br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
    </div>
    <div id="Layer2" style="position:absolute; left:550px; top:207px; '(not a break in real code)'
    width:318px; height:31px; z-index:2"><img src="welcome.gif" width="247" height="18"></div>
    <div id="Layer3" style="position:absolute; left:179px; top:122px; '(not a break in real code)' 
     width:350px; height:71px; z-index:3"><img src="collg1.jpg" width="505" height="80"></div>
    <div id="Layer4" style="position:absolute; left:171px; top:211px;'(not a break in real code)' 
    width:352px; height:215px; z-index:4; background-color: #FFFFFF;'(not a break in real code)' 
    layer-background-color: #FFFFFF; border: 1px none #000000">
    what do i do to get that layer to always stay in the middle (the positions they are now), whatever resolution you have?
    Because now it looks great in my resolution 1024*768
    But when i change to 800*600 everything goes down the right corner.
    Also please paste the code as you would change it
    Last edited by Lazerzubb; Mar 26, 2002 at 09:00.

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2001
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it doesn't work.

    is it supposed to be within


    Code:
    body {
        margin: auto;
    }

    ???
    signature

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Why are my gifs vertically, not horizontally aligned?

    Here is my code:

    CSS:

    div.float {
    float: center;
    }

    div.float p {
    text-align: center;
    }

    HTML:

    <table width="100%">
    <tr width="100%>
    <td align="right">
    <div class="float" align="center">
    <span style="margin-left:auto; margin-right:auto;"><a href="C:\Documents and Settings\Ashley Stearns\My Documents\virtualashley.html"><img src="C:\Documents and Settings\Ashley Stearns\My Documents\homephotoshop.gif" width="51" height="51"></img src></span>
    <p>Home</p></a>
    </td>
    </div>
    <td align="left">
    <div class="float" align="center">
    <span style="margin-left:auto; margin-right:auto;"><a href="mailto:ashleystearns@attbi.com"><img src="C:\Documents and Settings\Ashley Stearns\My Documents\writeus.gif" width="51" height="51" alt="E-mail"></img src></span>
    <p>Email</p></a>
    </td>
    </tr>
    </div>
    </table>

    Thank you.


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
  •