Results 1 to 3 of 3

Thread: Image not centering

  1. #1
    Join Date
    Feb 2013
    Posts
    56
    Thanks
    10
    Thanked 0 Times in 0 Posts

    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,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    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
    56
    Thanks
    10
    Thanked 0 Times in 0 Posts

    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
  •