Centering and distributing equally

[sparkymark75]

I have a div which contains an unordered list. There are 5 list items, all of which contain an image to give the effect of 5 boxes in a single row.

Becauses my page is fluid, I'd like to boxes to remain horizontally centered in the div and spread out with equal spacing between each.

What I've tried to so far;

#boxes {
	height: 140px;
	width: 100%;
}

#boxes ul {
	list-style: none;
	width: 90%;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
}
#boxes li {
	display: inline;
	float: left;
	margin-right: 5%;
	border: 1px #999999 solid;
}

<div id="boxes">
			<ul>
				<li id="bmc"><a href="#"><img src="images/img1.png" alt="" width="152px" height="101px" /></a></li>
				<li id="chb"><a href="#"><img src="images/img2.png" alt="" width="152px" height="101px" /></a></li>
				<li id="ecs"><a href="#"><img src="images/img3.png" alt="" width="152px" height="101px" /></a></li>
				<li id="esc"><a href="#"><img src="images/img4.png" alt="" width="152px" height="101px" /></a></li>
				<li id="stc"><a href="#"><img src="images/img5.png" alt="" width="152px" height="101px" /></a></li>
			</ul>
		</div>

 

[GravyMonster]

That works for me?

*edit*
Just noticed IE was the problem - change the #boxes to this...

#boxes {
	height: 140px;
	width: 100%;
	text-align: center;
}

 

[sparkymark75]

I'll give that a bash tomorrow, cheers.