How To Center Images Using Css

[Guest xchaotix]

Hi all, sorry if this has been posted before, im at my wits end. Basically this is a break down of what i want to do:Display 4 images in a horizontal lineHave the images centered on the screenEach image has a seperate hyperlinkEach image has a hover effect Now i did I did a google search for methods and they mainly were for designing navigation bars but i guess in effect it is the desired effects i wish to achieve. They are all pretty similar "glass door" or "sliding door" techniques. Ive tried so many ones that i cant remember which bits of code i need to keep and which bits to delete! I can get it working perfectly using display:block; but this displays the images in a vertical line instead of horizontal, if i use display:inline; then it doesnt display the images properly! Its like a merry go round i get one thing working then another thing stops working!!!!!!!!!I would be much obliged if someone could let me know which method I should use to achieve my goal.Heres the code but as i said ive chopped and screwed it so many times i wouldnt be surprised it doesnt make sense:HTML

<!-- 	<div id="sponsors">		<ul id="sponsorList">			<li><a id="ubi" href="http://www.ubi.com"><img src="images/sponsorlogoUBIon.gif"></a></li>			<li><a id="activision" href="http://www.activision.com"></a></li>			<li><a id="ea" href="http://www.ea.com"><img src="images/sponsorlogoEAon.gif"></a></li>			<li><a id="blizz" href="http://www.blizzard.com"><img src="images/sponsorlogoBlizzardon.gif"></a></li>		</ul>	</div>--><div id="sponsors"><div id="test1"><a href="#"> </a></div><div id="test2"><a href="#"> </a></div><ul id="sponsorsList"><li id="acti"><a href="#">Item one</a></li><li id="ubi"><a href="#">Item two</a></li><li id="ea"><a href="#">Item three</a></li><li id="blizz"><a href="#">Item four</a></li></ul></div>

And the CSS:

#sponsors {	clear:both;	padding:0;	color:#D0D3FF;	font:bold 10px Tahoma, Arial, Helvectica, sans-serif;	border-top:1px solid #4D507B;	width:100%;	overflow:hidden;	background:url(images/backSponsors.gif) #fff bottom left repeat-x;	margin-left:auto;	margin-right:auto;	text-align:center;	vertical-align: middle;}#sponsorsList ul{margin: 0;white-space: nowrap;padding: 0;}#sponsorsList li{display: inline;list-style-type: none;}#acti a {display:block;width:145px;height:110px;background-image:url(images/splogoActi.gif);}#ubi a {display:block;width:145px;height:110px;background-image:url(images/splogoUbi.gif);}/*#sponsors a {	width:145px;	height:110px;	text-decoration: none;}#activision {	display:block;	background:url("images/splogoActi.gif") no-repeat 0 0;	width:145px;	height:110px;	text-decoration: none;}#activision:hover  {	background-position: 0 -110px;}*/#test1 {	margin-left:auto;	margin-right:auto;	background:url(images/splogoActi.gif) no-repeat 0 0;	width:145px;	height:110px;}#test1 a {	display:block;	width:145px;	height:110px;}#test2 {	margin-left:auto;	margin-right:auto;	background:url(images/splogoUbi.gif) no-repeat 0 0;	width:145px;	height:110px;}#test2 a {	display:block;	width:145px;	height:110px;}

[Ingolme]

Change this:

#sponsorsList ul{margin: 0;white-space: nowrap;padding: 0;}

And try this instead:

#sponsorsList {margin: 0;white-space: nowrap;padding: 0;text-align: center;}

And then display the <li> elements as inline. It should center them correctly.#sponsorsList is the <ul> element, there is no <ul> element inside it.

[ravenshade]

To centre things I use...

margin: 0 auto;

In a div tag they should all line up nice an neatly for you with Ingolme's adjustments