CSS Forum

**cooper10** · 06-07-2007, 02:16 PM

Hi all,

I have a wrapper div which is centered within which is a another div which has an <ul> containing images that I want to center, but I'm getting alittle lost.

HTML Code:

	<style>
		html, body{
			height:100%;
			margin:0;
			padding:0;
			background:#gray;
		}
		#wrapper{
			width:700px;
			min-height:100%;
			margin:0 auto;
			position:relative;
			background:white;
		}
		#gallery li{
			width:85px;
			height:64px;
			border:solid #ccc;
			border-width:0 1px 1px 0;
			background:#fff;
			text-align:center;
			position:relative;
			float:left;
			display:inline;
			margin:5px;
			padding:3px;
		}
		#gallery {
			border:1px solid red;
			text-align:center;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="gallery">
			<ul>
				<li><a href="#"><img src="1_resize/01.jpg" alt="" title="" /></a></li>
				<li><a href="#"><img src="1_resize/02.jpg" alt="" title="" /></a></li>
			</ul>
		</div>
	</div>
</body>
</html>

**chrishirst** · 06-08-2007, 05:27 AM

you can't centre an element that has float:left and display:inline applied to it

if it's the <ul> to centre and then float the <li>'s inside the <ul> it's just the same as centring a <div>.

**persist1** · 06-12-2007, 11:36 PM

It'd be easier to grasp what you're trying for, if you could give some kind of sketch or other example.

Assuming that you simply want to center the list inside of some other container, you'd want to do something like the following:

Code:

* html #container {

  text-align: center;

}

#container ul#myUL {

  width: 50%;
  margin-left: auto;
  margin-right: auto;

}

* html #container * {

  text-align: left;

}

Assuming that you have an element called 'container' which itself contains an unordered list called 'myUL', the list will be half as wide (barring padding or borders, of course) as #container and rest equidistant from the left and right margins of #container.

The * html rules produce the same behavior *sigh* in IE6.