Centered Left-Aligned List

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

I though it would be matter of adapting the code dresden_phoenix helped me with below but it doesn’t seem to work:
http://www.sitepoint.com/forums/showthread.php?931517-Evenly-Distributed-Menu-Spacing&p=5255711&viewfull=1#post5255711

The folks at don’t seem to think it’s possible without js but surely that’s not the case especially considering it was possible with a justified list:
http://stackoverflow.com/questions/13771779/left-aligned-ul-centered-within-wrapper-div


<html>
	<head>
		<style>

		#wrapper {
			padding: 1em 0 2em;
			text-align:center;
		}
		#category_list{
			margin: 0 auto 0 auto;
			text-align: left;
			width: 100%;
		}

		#category_list ul{
			padding: 0;
			display:inline;
			margin: 0;
		}

		#category_list li{
			display:inline-block;
			width: 13.75em;
			padding: 1em 0;
			list-style: none;
			margin: 0 .5em 1em;
			border-bottom: 1px solid #aaaaaa;
		}

		#category_list h2{
			text-align: left;
			margin: 0;
			font: 1em "Georgia", Serif;
			font-style: italic;
		}
		</style>
	</head>
	
	
	<body>
		<div id="wrapper">
		<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></div>
	</body>
</html>

This is something similar to what I’m trying to achieve.

The ul seems to be nicely centered within #category_list if the window is wide enough. So, I’m not exactly sure what you mean. If you want want a vertical list that is centered, then display the list items as blocks.


#category_list li{
	display:block;         /* was display:inline-block */
	width: 13.75em;
	padding: 1em 0;
	margin: 0 .5em 1em;
	border-bottom: 1px solid #aaaaaa;
}

If you want the individual list items to center as they wrap at narrower window widths, then a couple of small changes in your present css is all that takes.


#category_list ul{
	padding: 0;
	display:inline-block;
	text-align:center;     /* was text-align:left */
	border: 1px solid red;
	margin: 0 auto;
}
#category_list li{
	display:inline-block;
	width: 13.75em;
	text-align:left;       /* added */
	padding: 1em 0;
	margin: 0 .5em 1em;
	border-bottom: 1px solid #aaaaaa;
}

hope this helps.

Thanks for your help Ronpat. For some reason I didn’t notice this.

The problem is that once the browser window is shorter than the width of the list on a single line the <ul> boundary expands to the window width rather than the width of the <li>'s and as a result no longer centres. I need it to also centre once wrapping occurs when the window shrinks.

Dunno. It seems to work nicely for me in IE8 and Firefox. Always remains centered.

Do you have a doctype at the top of your test page?

What browser are you using?

This is my test sheet. Your code plus the second set of changes suggested above. It seems to work according to your wishes. Always centered.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?934230-Centered-Left-Aligned-List
Thread: Centered Left-Aligned List
2012.12.07 06:58
RyanKing1809
-->
<head>
    <title>Centered List Items</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

#category_list {
    outline:1px solid magenta;
    padding: 1em 0 2em;
    text-align:center;
}

#category_list ul {
    padding: 0;
    display:inline-block;
    text-align:center;
    border: 1px solid red;
    margin: 0 auto;
}

#category_list li {
    display:inline-block;
    width: 13.75em;
    text-align:left;
    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;
}

    </style>
</head>
<body>

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

</body>
</html>


Sorry Ron I mustn’t have explained myself clearly - I would like the li’s to remain left aligned but the ul to be centered. I’m not sure why it breaks when the window width cause it to wrap.

Maybe this image will help explain what I’m trying to acheive:


<html>
	<head>
		<style>

		#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;
		}
		</style>
	</head>
	
	
	<body>
		<div id="wrapper">
		<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></div>
	</body>
</html>

You need to give the <ul> a desired width for the centering to take effect. For example:

#category_list ul {
padding: 0;
[s]display: inline-block;[/s]
text-align: left;
border: 1px solid red;
margin: 0 auto;
[COLOR="#FF0000"]width: 60em;[/COLOR]
}

Also, I’d suggest you lose the display: inline-block on the <ul>, as it’s not needed. That’s just for the <li>s.

Ah, after looking at stackoverflow I see what you mean. Sorry for being a little slow on the uptake. I’m not sure that such an effect is possible with css alone. Still looking, though.

You must be seeing something I’m not. Looks like a simple matter of centering the UL with a width to me, as I posted above.

Thanks Ralph - 60em happens to conveniently work with the width of my li’s - however if you try 54em - the li’s aren’t centred.
I would also like it to wrap on window resize. So something like width:80% makes sense but the li’s also aren’t centred.

Maybe it would be easier to modify the li width with media queries and percentages rather than getting the ul width working?

O, right, I see. Yes, perhaps @media rules would be a good way to go. Here’s a possible (albeit imperfect) starting point for desktop:

<!DOCTYPE html>
<html>
	<head>
		<style>

		#category_list {
			padding: 1em 0 2em;
			text-align:center;
		}

		#category_list ul{
			padding: 0;
			text-align: left;
			border: 1px solid red;
			margin: 0 auto;
			width: 80%;
			list-style: none;
			overflow: hidden;
		}

		#category_list li{
			float: left;
			width: 23%;
			padding: 1em 0;
			margin: 0 1% 1em;
			border-bottom: 1px solid #aaaaaa;
		}

		#category_list h2{
			text-align: left;
			margin: 0;
			font: 1em "Georgia", Serif;
			font-style: italic;
		}
		</style>
	</head>
	
	
	<body>
		<div id="wrapper">
		<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></div>
	</body>
</html>

With media queries, at certain widths change the widths of the <li>s to different %s, like 31% etc.

RyanKing1809, if you are in an experimental mode, Paul posted a very heady hack a few months ago that you might enjoy visiting. Just for fun. :slight_smile:

Thanks Ralph - I’ve been on the hunt for responsive gallery sites and this is how they appear to do things.

Thanks Ron, I might be able to use a touch of Paul’s wizardry in another part of my site.