PDA

View Full Version : Center images in window ?



ttmt
Mar 5th, 2012, 09:10 PM
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>

sunfighter
Mar 6th, 2012, 10:51 AM
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.



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