SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    645
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Center an image with css?

    I have a logo for a company.
    It should be centered on the index-page both horizontal and vertical.

    Is there a simple way to do this without tables in css?
    I made this with tables before, but it won't work in Safari on Mac. The image is then placed top.

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooh, splash page - you don't want an image, you need a 400KB Flash file...

  3. #3
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    img {text-align: center; margin: 0 auto;}
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  4. #4
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    645
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    nope just a simple logo 200x50 px.
    I just want it placed in the center area.

    mid mid

  5. #5

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    html,body {
      height:100%;
    }
    
    img {
      position:absolute;
      top:50%;
      margin-top:-25px; /* half of 50px */
      left:50%;
      margin-left:-100px; /* half of 200px */
    }
    Birnam wood is come to Dunsinane

  7. #7
    Beer drinker Srirangan's Avatar
    Join Date
    Jan 2005
    Location
    Beerland!
    Posts
    776
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    img {
    float:center;
    }
    Online Startups Insight for new entrepreneurs

  8. #8
    Beer drinker Srirangan's Avatar
    Join Date
    Jan 2005
    Location
    Beerland!
    Posts
    776
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or a better way..

    Code:
    body {
    padding:0px;
    margin:0px;
    }
    
    body div {
    height:100%;
    width:100%;
    text-align:center;
    vertical-align:center;
    }
    
    <body>
    
    <div><img src=...></div>
    
    </body>
    Online Startups Insight for new entrepreneurs

  9. #9
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    645
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Actually only the first code by AutisticCuckoo was working.
    The others didn't show correct in Safari.

    But I changed the figures just a little, since a scroll appeared.

    Thanks

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Srirangan
    Code:
    img {
    float:center;
    }
    There is no 'center' value for the float property!

    The scroll bars may be due to default margins/padding on the BODY element. This should do it:
    Code:
    html,body {
      height:100%;
      margin:0;
      padding:0;
    }
    Birnam wood is come to Dunsinane

  11. #11
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    645
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Nope, that didn't work in Safari at least.
    (didn't try in other browsers now).

    The following is working:

    PHP Code:
    html,body {
        
    height:90%;
        
    background-color#000000;
    }

    img {
      
    position:absolute;
      
    top:45%;
      
    margin-top:-25px/* half of 50px */
      
    left:45%;
      
    margin-left:-100px/* half of 200px */



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
  •