center a horizontal list with unknown width

**godisatheist** · Sep 27, 2007, 01:18

Hello,

I have a horizontal list like this with unknown width and want it centered in the box:

<div id="box">
<ul>
<li><a href="/">text1</a></li>
<li><a href="/">text1</a></li>
<li><a href="/">text1</a></li>
<li><a href="/">text1</a></li>
</ul>
<div style="clear:both;"></div>
</div>

#box {
text-align:center;
background-color:#131313;
}
#bottom ul {
margin:0 auto;
list-style:none;
}
#bottom li {
float:left;
}
#bottom a {
margin:0 27px;
text-decoration:none;
}

The problem is, it only gets centered when I give a width to #bottom ul
But the width is unknown, because there can be different strings as link.

Is there any valid solution?

Greetings, Andreas

**all4nerds** · Sep 27, 2007, 01:20

Hello

use display inline to your advantage

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<!-- saved from url=(0022)http://www.domain.com/ -->
	<style type="text/css">
	*{padding:0;margin:0;}
	
	.x{
	padding:.95em 0;
	text-align:center;
	list-style:none;
	}
	html .x .y{border-left:1px solid #0000ff;}
	
	.x li{display:inline;font-size:1em;}
	
	.x a{
	padding:.9em 3em;
	background:#ccccff;
	border:1px solid #0000ff;
	border-left:none;
	
	}
	.x a:hover{background:#ffccff;}
	</style>
	<script type="text/javascript">

	</script>
</head>
<body>

<ul class="x">
<li><a href="##" class="y">12345</a></li><li><a href="##">1234567</a></li><li><a href="##">12345678</a></li><li><a href="##">123</a></li>
</ul>

</body>
</html>

yours ?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- saved from url=(0022)http://www.domain.com/ -->
<style type="text/css">
*{padding:0;margin:0;}

#box{
text-align:center;
background:#131313;
margin:0 auto;
list-style:none;
padding:10px 0;
}

#box li{display:inline;}

#box a{
padding:10px 27px 10px 27px;
text-decoration:none;
color:#ffffff;
}

#box a:hover{background:#ff0000;color:#000000;}

</style>
<script type="text/javascript">

</script>
</head>
<body>

<ul id="box">
<li><a href="##">text1</a></li><li><a href="##">text1</a></li><li><a href="##">text1</a></li><li><a href="##">text1</a></li>
</ul>

</body>
</html>

**godisatheist** · Sep 27, 2007, 02:50

Thanks @ allfornerds

It works, but isn't it the same like only
<div>
<a href="">text1</a>
<a href="">text2</a>
<a href="">text3</a>
<a href="">text4</a>
</div>

div {
text-align:center;
padding:2px 0;
background:#foofoo
}
a{
margin: 0 27px;
}

when I don't use the floats I get an error in IE7 when using the zoom.
The <a>'s are loosing their margin/padding then. But only when I have it included in my website, not when I have your example only...

well, perhaps I will stop caring about those IE illnesses...

thanks again

**all4nerds** · Sep 27, 2007, 03:03

Hello

This works now ? , but there is a little trick getting the padding to work on the A tag, you have to make room for it with a padding on the ul ALSO
This works in my IE 7 , although the zoom works a little bit different as expected and has it's troubles also, so if your set up is not working probably some other CSS is working on your UL LI A's ?, we need more code or better a link to the page Please

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- saved from url=(0022)http://www.domain.com/ -->
<style type="text/css">
*{padding:0;margin:0;}

#box{
background:#131313;
margin:0 auto;
list-style:none;
padding:10px 0;
text-align:center;
}

#box li{display:inline;}

#box a{
background:url(http://www.google.nl/images/firefox/fox1.gif) no-repeat -1em -1em;
margin:0 27px;
padding:10px 0;
text-decoration:none;
color:#ffffff;
min-height:1&#37;;
}

#box a:hover{background-position:.5em .5em;color:#ff0000;}


</style>
<script type="text/javascript">

</script>
</head>
<body>

<ul id="box">
<li><a href="##">text1</a></li><li><a href="##">text1</a></li><li><a href="##">text1</a></li><li><a href="##">text1</a></li>
</ul>

</body>
</html>

**godisatheist** · Sep 27, 2007, 03:42

ok , I will post the link to the page as soon it is online.
Thanks!

**Paul O'B** · Sep 27, 2007, 03:55

Hi,

You can centre floats using a technique shown in this example:

http://www.pmob.co.uk/temp/centred-float4.htm

The only drawback is that if the width of the parent container is a fluid width then when the float items wrap to the next line it aligns to the left of the list.

If you can keep the elements inline as in all4nerds example then that's also a good method to use but you do run into problems if you have complicated styling with borders, padding and margins as inline elements are limited in what they can contain and does vary between browser.

All4nerds method may be the best solution here as the styling seems relatively simple. I always find that IE7's zoom causes problems anyway and I think most users will expect the layout to be slightly different when zoomed as long as its readable.

**all4nerds** · Sep 27, 2007, 04:11

Hello

Like I mentioned above, and i know this only very recently, if you give them room inline's style as good as block levels, they behave like a single line of text, but there is a minor disadvantage two words with a brake <br> and the inline is gone

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<!-- saved from url=(0022)http://www.domain.com/ -->
	<style type="text/css">
	*{padding:0;margin:0;}
	
	.x{
	padding:.95em 0;
	text-align:center;
	list-style:none;
	}
	/* html .x .y{border-left:1px solid #0000ff;} */
	
	.x li{display:inline;font-size:1em;}
	
	.x a{
	padding:.9em 3em;
	background:#ccccff url(http://www.google.nl/images/firefox/fox1.gif) no-repeat -2em -2em;
	border:1px solid #0000ff;
	/* border-left:none; */
	margin:0 27px;
	}
	.x a:hover{background-position:5em 1em;}
	</style>
	<script type="text/javascript">

	</script>
</head>
<body>

<ul class="x">
<li><a href="##" class="y">12345</a></li><li><a href="##">1234567</a></li><li><a href="##">12345678</a></li><li><a href="##">123</a></li>
</ul>

</body>
</html>

make room demo

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<!-- saved from url=(0022)http://www.domain.com/ -->
	<style type="text/css">
	*{padding:0;margin:0;}
	
	.x{
	padding:1.95em 0;
	text-align:center;
	list-style:none;
	padding-top:2em;
	}
	/* 
	html .x .y{border-left:1px solid #0000ff;}
	 */
	.x li{display:inline;font-size:1em;}
	
	.x a{
	padding:.9em 3em;
	background:#ccccff url(http://www.google.nl/images/firefox/fox1.gif) no-repeat -2em -2em;
	border:1px solid #0000ff;
	/* border-left:none; */
	margin:0 27px;
	}
	.x a:hover{background-position:5em 1em;border:1em solid}
	</style>
	<script type="text/javascript">

	</script>
</head>
<body>

<ul class="x">
<li><a href="##" class="y">12345</a></li><li><a href="##">1234567</a></li><li><a href="##">12345678</a></li><li><a href="##">123</a></li>
</ul>

</body>
</html>

**Paul O'B** · Sep 27, 2007, 04:48

Originally Posted by Ben

if you give them room inline's style as good as block levels,

I'm not disagreeing with you exactly as I said above in simple situations it can work well

.

To really see what's going on you need to add a border to the list and then check in firefox and IE.

e.g.

Code:

.x li{display:inline;font-size:1em;border:1px solid #000}

In IE the lists border is pushed out around the anchors border but in other browsers the list border remains at the current line height as it should, because padding on non-replaced inline elements can't affect the line height and the inline elements poke out at the top and bottom which is why you have to make room for them or they will overlap.

Of course you can fiddle with line height settings and try to match it all up but is soon gets complicated especially if then you have a span inside the anchor that needs to be block level also.

Inline styling is great if you only need to style the one element but gets complicated (or impossible in a cross browser way) if you need to add styling to the wrappers and inners also. Even my simple floated example would be difficult to do as inline due to the extra two borders I added for the shadow effect.

There are also other methods using some proprietary code that basically make use of inline-block which eventually will be the preferred method when all browsers adopt it (it'll be a long wait though

)

But as I already said above Ben's method is probably best in this case.

**all4nerds** · Sep 27, 2007, 05:19

Hello

Yes I know that a list drags a lot of dirt in to menu's, I never was in favor of slapping them around a link set, the UL LI are only there as a vehicle's to the needs of semantics ?
The inline property is the interesting future, because it contradicts what is the general opinion, you can't give inline's top and bottom paddings, as you can see it works

PS as a test you can remove the li's and change the ul in a div, without any change in the css

**Paul O'B** · Sep 27, 2007, 07:29

Originally Posted by ben

because it contradicts what is the general opinion, you can't give inline's top and bottom paddings, as you can see it works

You could always give an inline element top and bottom padding, there was no doubting that but the problem is that the padding doesn't affect the line height and the padding bleeds into the line above and below as you have found out and accommodated for.

I am not contradicting you but confirming what you say but at the same time pointing out that it will only work in simple cases like the above when you work on one container. If you want nested containers for certain visual effects such as the shadowed borders in my example then inline styling fails because the parent doesn't grow with the child. The parent stays at the line height while the child pushes through the line-height.

This varies between browser as well because it isn't specifically defined in the CSS specs. There are ways and means around it but it soon becomes quite complicated to maintain.

I did research on this myself some years back

.

**all4nerds** · Sep 27, 2007, 08:00

Hello

Nested menu's ?, No that's not flying, but i see a simple link set with a hover ?, and can't get the code of the tread starter any simpler , and i would use it using em's
PS only Opera's zoom works as expected

PS Paul you have height + line-height + padding ( or i overlook something ), and i use 2X padding, and there is indeed a relation in font-size/padding if you use em's

The SitePoint Forums have moved.

User Tag List

Thread: center a horizontal list with unknown width

Thread Tools

Display

center a horizontal list with unknown width

Bookmarks

Bookmarks

Posting Permissions