How to Center Menu?

Hi,

I have the following menu markup/CSS:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
*{
        margin:0;
        padding:0;
}
ul#my-menu{
	overflow:auto;
	padding:5px 0 0;
	background:#CCC;
}
ul#my-menu li{
	display:inline;
	list-style:none;
}
ul#my-menu li a{
	float:left;
	margin:0 24px;
	padding:0 5px;
	line-height:28px;
	font-size:11px;
	color:#000;
	text-decoration:none;
}
ul#my-menu li a:hover{
	color:blue;
}
</style>
</head>
<body>
<ul id="my-menu">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Linkerrr 2</a></li>
    <li><a href="#">Link Link Link 3</a></li>
    <li><a href="#">Li 4</a></li>
</ul>
</body>
</html>

Now the big question is how do I center the LI’s within the UL! Links are variable not defined widths with 5px padding and margin between them…

What is the proper way to do this, whilst being cross-browser compatible?

Is this correct:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
*{
	margin:0;
	padding:0;
}
#wrap{
	clear:both; 
	position:relative;
	float:left;
	width:100%;
	background:#CCC;
}
ul#my-menu{
	float:left;
	position:relative;
	left:50%;
	text-align:center;
	padding:0;
}
ul#my-menu li{
	float:left;
	position:relative;
	right:50%;
	list-style:none;
}
ul#my-menu li a{
	display:block;
	margin:0 24px;
	padding:0 5px;
	line-height:28px;
	font-size:11px;
	color:#000;
	text-decoration:none;
}
ul#my-menu li a:hover{
	color:blue;
}
</style>
</head>
<body>
<div id="wrap">
    <ul id="my-menu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Linkerrr 2</a></li>
        <li><a href="#">Link Link Link 3</a></li>
        <li><a href="#">Li 4</a></li>
    </ul>
</div>
</body>
</html>

I guess I sort of answered my own question whilst writing this :slight_smile: but i’m still interested to know if this is the best way, it seems to work but requires extra-markup.

Hi,

You could use display:inline-block these days and lose the extra wrapper.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* {
    margin:0;
    padding:0;
}
ul#my-menu {
    overflow:auto;
    background:#CCC;
    text-align:center;
}
ul#my-menu li {
    display:inline;
    list-style:none;
}
ul#my-menu li a {
  display:-moz-inline-box;/* ff2 support*/
    display:inline-block;
    margin:0 24px;
    padding:0 5px;
    font-size:11px;
    color:#000;
    text-decoration:none;
    background:red;
    line-height:28px;
}
ul#my-menu li a:hover {
    color:blue;
}
</style>
</head>
<body>
<ul id="my-menu">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Linkerrr 2</a></li>
    <li><a href="#">Link Link Link 3</a></li>
    <li><a href="#">Li 4</a></li>
</ul>
</body>
</html>

You will get a white space between list items but that doesn’t seem to be an issue here.

If you are going to use the floated 50% method then reverse the way you do it to avoid the horizontal scrollbar being an issue as you close the page.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
*{
    margin:0;
    padding:0;
}
#wrap{
    clear:both; 
    position:relative;
    float:left;
    width:100%;
    background:#CCC;
}
ul#my-menu{
   [B] float:right;[/B]
    position:relative;
   [B] left:-50%;[/B]
    text-align:center;
    padding:0;
}
ul#my-menu li{
    float:left;
    position:relative;
   [B] left:50%;[/B]
    list-style:none;
}
ul#my-menu li a{
    float:left;
    margin:0 24px;
    display:inline;
    padding:0 5px;
    line-height:28px;
    font-size:11px;
    color:#000;
    text-decoration:none;
    background:red
}
ul#my-menu li a:hover{
    color:blue;
}
</style>
</head>
<body>
<div id="wrap">
    <ul id="my-menu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Linkerrr 2</a></li>
        <li><a href="#">Link Link Link 3</a></li>
        <li><a href="#">Li 4</a></li>
    </ul>
</div>
</body>
</html>


Hi Paul,

Thanks a lot for your reply works like a charm! I thought there had to be a better way of doing it.

Sorry to be a pain but what exactly do you mean by “You will get a white space between list items”, would this only be a problem if we wanted the LI’s to appear right next to each other.

Also thanks for the resouce on the floated 50% method!

Yes that’s right. Inline-blocks are like words (or images) and you get a gap in-between them although there is a solution to this as shown in a recent CSS quiz.