Centering <ul> accoriding the 100% width

HTML & CSS
1

Hey all,

I’m trying to center my <ul> according to a div with a width of 100%.
My <ul> also have a width of 100% and within that <ul> - 4 <li’s> with a width of 25% each - I also want to center the <li>'s, according to the width of the <ul>.

How on earth would I go about that? I’ve tried a few things without luck. My html looks like the following so far:

<style type="text/css">
#menuContainer ul {
margin: 0px;
padding: 0px;
height: 32px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #f9f9f9;
list-style: none;
}

#menuContainer li {
float: left;
background: url(images/menu_triangle.jpg) no-repeat left 13px;
padding: 5px 0 5px 20px;
width: 25%;
color: #009999;
font-weight: bold;
background-color: #0fb34d;
}
</style>
	<div id="menuContainer">
		<ul>
			<li>Menu 1</li>
			<li>Menu 2</li>
			<li>Menu 3</li>
			<li>Menu 4</li>
		</ul>
	</div>
2

If you give the <ul> a width and margin:0 auto; it will center it horizontally, if you want to center them with no width you can do something like this :slight_smile: