Centered Left-Aligned List

**RyanKing1809** · Dec 7, 2012 05:58

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.

HTML Code:

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

Code CSS:

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

**RyanKing1809** · Dec 7, 2012 18:45

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/show...=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/1...in-wrapper-div

HTML Code:

<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.
centreleftlist.jpg

**ronpat** · Dec 7, 2012 18:51

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.

Code:

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

Code:

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

**RyanKing1809** · Dec 7, 2012 19:06

Originally Posted by ronpat

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.

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.

**ronpat** · Dec 7, 2012 19:24

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.

Code:

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

**RyanKing1809** · Dec 7, 2012 19:58

Originally Posted by ronpat

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

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.

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:

Screen_Shot_2012_12_08_at_12_34_06_PM.jpg

HTML Code:

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

**ralph.m** · Dec 7, 2012 20:16

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

Code:

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

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.

**ronpat** · Dec 7, 2012 20:26

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.

**ralph.m** · Dec 7, 2012 20:32

Originally Posted by ronpat

I'm not sure that such an effect is possible with css alone

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.

**RyanKing1809** · Dec 7, 2012 20:39

Originally Posted by ralph.m

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

Code:

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

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.

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?

**ralph.m** · Dec 7, 2012 20:56

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:

Code:

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

**ronpat** · Dec 7, 2012 21:09

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.

http://www.sitepoint.com/forums/show...60#post5194960

**RyanKing1809** · Dec 7, 2012 21:25

Originally Posted by ralph.m

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:

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

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

Originally Posted by ronpat

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.

http://www.sitepoint.com/forums/show...60#post5194960

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

User Tag List

Thread: Centered Left-Aligned List

Thread Tools

Display

Centered Left-Aligned List

Just an update

Bookmarks

Bookmarks

Posting Permissions