Centered Left-Aligned List

[RyanKing1809]

Hi Everyone,


The following <ul> is left-aligned and I'm trying to centre it within the #category_list div but I can't seem to get it right.

I think the problem is that the <ul> doesn't wrap around its content but expands to full width.

What am I missing here?


Thanks for your help.

			<div id="category_list">
				<ul>
				<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
				<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
				<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
				<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
				<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
				<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
				</ul>
			</div>

#category_list {
	padding: 1em 0 2em;
	text-align:center;
}
 
#category_list ul{
	padding: 0;
	display:inline-block;
	text-align: left;
	border: 1px solid red;
	margin: 0 auto;
}
 
#category_list li{
	display:inline-block;
	width: 13.75em;
	padding: 1em 0;
	margin: 0 .5em 1em;
	border-bottom: 1px solid #aaaaaa;
}
 
#category_list h2{
	text-align: left;
	margin: 0;
	font: 1em "Georgia", Serif;
	font-style: italic;
}
#category_list p{
	text-align: left;
	margin: 0;
	font: .75em "Georgia", Serif;
	font-style: italic;
}
#category_list img{
	margin: .5em 0;
}