Center images in window?

HTML & CSS
1

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.


<!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

Check out this link :).
[URL=“http://pmob.co.uk/pob/hoz-vert-center.htm”]http://pmob.co.uk/pob/hoz-vert-center.html

If you are willing to forget IE7, you can try the display:table option. That would be the easiest solution :slight_smile:

3 
img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Then class your image center.