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 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Center images in window ?

    Center images in window ?

    Hi all

    This sounds really simple and I'm sure it is but I'm stuck, my brain is dead.

    http://www.ttmt.org.uk/forum/

    I have a div containing images in an unordered list. I simple want this div to be centered in the window and in it's surrounding div. When the window is resized I want the images div to resize and and the images to drop to a new line. At the moment when the window resizes the images drop to a new line but they are not in the center.

    If I could set a width on the div containing the images I could set the margins to auto. As the width of the images div will change I can't work out how to keep it in the center

    Any help would be greatly appreciated.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
    	<style type="text/css">
    	  *{
    	    margin:0;
    	    padding:0;
    	  }
    	  html,body{
    	    height:100%;
    	  }
    	  #wrapper{
    	    background:#ccc;
    	    overflow:auto;
    	    margin:0 60px;
    	    height:100%;
    	  }
    	  ul{
    	    list-style:none;
    	  }
    	  ul li{
    	    float:left;
    	    margin: 0 10px 10px 0;
    	  }
    	  #container{
    	    overflow:auto;
    	    margin:50px auto 0 auto;
    	    width:50%;
    	  }
    	</style>
    </head>
    
    <body>
      
      <div id="wrapper">
        <div id="container">
          <ul>
            <li><a href="#"><img src="01_th.jpg" /></a></li>
            <li><a href="#"><img src="02_th.jpg" /></a></li>
            <li><a href="#"><img src="03_th.jpg" /></a></li>
            <li><a href="#"><img src="04_th.jpg" /></a></li>
          </ul>
        </div><!-- #container -->
      </div><!-- #wrapper -->
    
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,715
    Thanks
    25
    Thanked 660 Times in 659 Posts
    You did not give your images a height or a width, and you differently should, so the exact measurements are just eye-balled.
    You put a margin of 10px on the right of them. That does not help in centering the images so I changed that to 5px on the left and the right side. Still gives you a 10px gutter between them.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>untitled</title>
    <base href="http://www.ttmt.org.uk/forum/" />
    <style type="text/css">
    *{
    	margin:0;
    	padding:0;
    }
    body{
    	background:#ccc;
    }
    ul{
    	list-style:none;
    }
    ul li{
    	float:left;
    	margin: 0 5px 0 5px;
    }
    #wrapper{
    	padding-top: 50px;
    }
    #container{
    	margin: 0 auto;
    	width: 588px;
    }
    </style>
    </head>
    
    <body>
    
    <div id="wrapper">
    	<div id="container">
    		<ul>
    			<li><a href="#"><img src="01_th.jpg" /></a></li>
    			<li><a href="#"><img src="02_th.jpg" /></a></li>
    			<li><a href="#"><img src="03_th.jpg" /></a></li>
    			<li><a href="#"><img src="04_th.jpg" /></a></li>
    		</ul>
    	</div><!-- #container -->
    </div><!-- #wrapper -->
    
    </body>
    </html>


  •  

    Posting Permissions

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