How to arrange the menu in the middle?

Hi,

How to arrange the menu in the middle? http://jsfiddle.net/8Observer8/gH9zK/

Thank you!

Hi,

Use inline-block instead of float.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.nav {
	list-style:none;
	margin:0;
	padding:0;
	overflow:hidden;
	text-align: center;
	width:100%;
	display:table;/* Webkit Fix */
	word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
}
.nav li {
	display:inline-block;
	word-spacing:0; /* reset from parent ul*/
}
* html #nav li { display:inline; } /*IE6*/
*+html #nav li { display:inline; } /*IE7*/
.nav a {
	display:block;
	width:120px;
	font-weight:bold;
	color:#FFF;
	background-color:#98bf21;
	text-align:center;
	padding:4px;
	text-decoration:none;
	text-transform:uppercase;
}
.nav a:visited { color:#FFF; }
.nav a:hover, .nav a:active, nav a:focus { background-color:#7A991A; }
</style>
</head>

<body>
<ul class="nav">
		<li><a href="#home">Home</a></li>
		<li><a href="#news">News</a></li>
		<li><a href="#contact">Contact</a></li>
		<li><a href="#about">About</a></li>
</ul>
</body>
</html>

There are some extra fixes documented in the above to cure the whitespace gap with inline-block elements so read the code carefully.:slight_smile:

Thank you very much :slight_smile:

This is your code: http://jsfiddle.net/8Observer8/gH9zK/9/