Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Center IMAGE horizontal and vertical?

    What's the best way to vertically and horizontally center an image?

    Create a <div>?

  • #2
    New Coder
    Join Date
    Jul 2011
    Location
    Australia
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Yes, using div's then assigning the margin and/or padding properties to center either the div itself of the content contained in the div.

    You can also use : { margin-left:auto; margin-right:auto; }

    This will automatically divide any remaining space between the two margins, effectively resulting in a perfect center.
    “Opinion is the medium between knowledge and ignorance.”
    “The old believe everything; the middle aged suspect everything: the young know everything.”

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there freshfan,

    here is an example....
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>image centered vertically and horizontally</title>
    
    <style type="text/css">
    html,body {
        height:100%;
        margin:0;
     }
    body {
        min-height:280px;       /* this is the image height */
        background-color:#f60;
     }
    #vertical {
        float:left;
        width:100%;
        height:50%;
        margin-top:-140px;       /* this is half the image height */
     }
    #container {
        clear:both;
     }
    #container img {
        display:block;
        width:360px;
        height:280px;
        margin:auto;
     }
    </style>
    
    </head>
    <body>
    
    <div id="vertical"></div>
    
    <div id="container">
     <img src="http://www.coothead.co.uk/images/banana.jpg" alt="fruit">
    </div>
    
    </body>
    </html>
    
    coothead


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •