Menu Horizontal centrado

Dhampire · #1 (**permalink**) 12/07/2012, 09:51

Desde hace rato que estoy en una dura batalla con un codigo CSS. Sucede que quiero que todo el menu esté centrado.

He visitado un monton de paginas pero sigue igual.

Código HTML:

<!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>Pruba</title>
<style>
#mainmenu {
	margin: 35px auto;
	word-wrap: break-word;
	text-align:center
}

ul#mainmenu-menu {
	height: 52px;
	background: rgb(247,247,247);
	background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(244,244,244,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(244,244,244,1)));
	background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
	background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
	background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
	background: linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
	border: 1px solid #E2E2E2;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f4f4f4',GradientType=0 );
}

ul#mainmenu-menu li.menu-item {
	position: relative;
		border-right: 1px solid #E2E2E2;
	display: block;
	float: left;
	text-align:center;
	font-size: 14px;
}

ul#mainmenu-menu li.menu-item a {
	color: #5e5e5e;
	display: block;
	padding: 20px 40px;
	text-decoration: none;
	font-family: 'Droid Sans', sans-serif;
}

ul#mainmenu-menu li.menu-item a:hover {
	background: #F9F9F9;
}

ul#mainmenu-menu ul.sub-menu {
	position: absolute;
	top: 52px;
	left: 0px;
	width: 160px;
	
	background: white;
	border: none;
	box-shadow: 0 1px 2px rgba(0,0,0,0.25);
	display: none;
	z-index: 99;
}

ul#mainmenu-menu li:hover ul.sub-menu {
	display: block;
}

ul#mainmenu-menu ul.sub-menu li {
	border: none;
	font-weight: normal;
}

ul#mainmenu-menu ul.sub-menu li a {
	line-height: 15px;
	padding: 15px 15px 15px 15px;
}</style>
</head>

<body>
<div id="mainmenu">
	<div class="container">
		<div class="menu-nav-container"><ul class="menu" id="mainmenu-menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27" id="menu-item-27"><a href="#">Inicio</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29" id="menu-item-29"><a href="#">About Me</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31" id="menu-item-31"><a href="#">Taller</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30" id="menu-item-30"><a href="#">Galeria</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28" id="menu-item-28"><a href="#">Contacto</a></li>
</ul></div> </div>
</div>
</body>
</html>

Saludos

racba · #2 (**permalink**) 12/07/2012, 18:29

Veo que tenes un 'float: left' que no te deja centrar el menu.
Deberias revisar el 'display: block' tal vez el display: inline' funcione mejor.
Aqui hay un ejemplo:
http://xhtml.com/10736464-753C-44F1-BF7E-C2354E70AD51/mainmenu.htm