Results 1 to 3 of 3

Thread: Image not centering

  1. #1
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default Image not centering

    I have an image inside a div that is inside a div. I cannot get the image to center on the page. Any help is apprecated. Thank you.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    	<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css"/>
        <link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/>
        	
    <style type="text/css">
    #container {
        width: 1000px;
        height: 200px;
        position: relative;
    }
    
    #overlay {
    	width: 100%;
    	height: 52px;
    	position: absolute;
    	top: 20px;
    	left: 40px;
    	color: white;
    	font-size: 40px;
    	z-index: 10;
    }
    
    #base {
    	width: 100%;
    	height: 51px;
    	position: absolute;
    	color: black;
    	opacity: 0.2;
    	top: 20px;
    	left: 0px;
    }
    
    .space {
    	padding-bottom:200px;
    	}
    
    img.center {
    	display: block;
    	width: 945px;
      	margin-left: auto;
        margin-right: auto;
    }
    #inner {
    	display: block;
    	width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
    
    </style>
    	
        
    	<!--[if lt IE 8]>
           <div style=' clear: both; text-align:center; position: relative;'>
             <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
               <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
            </a>
          </div>
        <![endif]-->
        <!--[if lt IE 9]>
       		<script type="text/javascript" src="js/html5.js"></script>
        	<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
    	<![endif]-->
    </head>
    <body>
     <div id="container">
        <div id="overlay">
             <nav>  
            <ul class="menu">
                <li class="current"><a href="index.html">Home</a></li>
                <li><a href="breeding.html">Services</a></li>
                <li><a href="sale.html">Work</a></li>
                <li><a href="events.html">Rental</a></li>
                <li><a href="gallery.html">About</a></li>
                <li><a href="gallery.html">Press</a></li>
                <li><a href="contacts.html">Contacts</a></li>
            </ul>
            <div class="clear"></div>
         </nav>
        </div>
        <div id="base"><img src="images/BarTop.jpg"/></div>
        <div id="inner"><img src="images/Glasses.jpg" width="945" height="495" class="center"/></div>
      </div>
    </body>
    </html>

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,960
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    Which image? Can you be specific please.

    Also, you have markup in the head section - it should go in the body. This block;
    Code:
    	<!--[if lt IE 8]>
           <div style=' clear: both; text-align:center; position: relative;'>
             <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
               <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
            </a>
          </div>
        <![endif]-->
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    OK i will move it. The image is Glasses.

Similar Threads

  1. Replies: 1
    Last Post: 11-19-2008, 03:04 AM
  2. Help on non centering image with IE7
    By gewixmassiv in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 11-20-2007, 01:50 PM
  3. Centering an image
    By Frog Brew in forum CSS
    Replies: 4
    Last Post: 02-25-2007, 08:01 PM
  4. Centering an image
    By danno in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 01-26-2007, 12:51 AM
  5. centering an image
    By xxm0ntyxx in forum HTML
    Replies: 4
    Last Post: 05-02-2006, 02:19 PM

Tags for this Thread

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
  •