Jump to content

How To Center Images Using Css


Guest xchaotix
 Share

Recommended Posts

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;}

Link to comment
Share on other sites

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.

Edited by Ingolme
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...