SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Feb 2002
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    two-way centering

    Is there any way to have an image (or some other element) both vertically and horizontally centered on a page?

    regards,
    -lemur

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Horizontal centering is easy, but nobody has really come up with a good vertical centering method yet. The most practical thing to do would be to use tables.

  3. #3
    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)
    margin: auto; But vertically centered is going to be relative to how long the page is.

    Sketch
    Aaron Brazell
    Technosailor



  4. #4
    SitePoint Member
    Join Date
    Feb 2002
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    i figured it out.

    this works pretty well.

    Code:
    #blah
    {
    	position: absolute;
    	margin-top: -86;
    	top:  50%;
    	left: 50%;
    	margin-left: -265;
    	width: 529px;
    	height: 192px;
    
    }
    where margin-left and margin-top are negative one half of the width and height respectively.

  5. #5
    SitePoint Evangelist azizur_rahman's Avatar
    Join Date
    Nov 2001
    Location
    London, UK
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you use a table then here is a sample:

    save the code as HTML file and test it.
    Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
      <tr>
        <td align="center" valign="middle">Is there any way to have an image (or some 
          other element) both vertically and horizontally centered on a page?<br>
          <strong>yes there is. and this it? it will center both ways everything depending 
          on the size of window is.</strong></td>
      </tr>
    </table>
    Hope that helps
    Azizur Rahman
    Web Application Developer

  6. #6
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by azizur_rahman

    Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
      <tr>
        <td align="center" valign="middle">Is there any way to have an image (or some 
          other element) both vertically and horizontally centered on a page?<br>
          <strong>yes there is. and this it? it will center both ways everything depending 
          on the size of window is.</strong></td>
      </tr>
    </table>
    That's also what I do.

    If you want to center an entire webpage, both horizontally and vertically, simply nest all of the code inside the <table><tr><td> </td></tr></table>

    Works like a charm.
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.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
  •