Centrando mi menu <ul>

[fladur]

Hola a todos:

Acabo de crear un menu de navegacion muy basico usando puro css en HTML, esta basadao en <ul> y funcion bien por ahora, pero no tengo idea de como puede centrarlo asi que les pedia su ayuda. Este es mi HTML.

Código HTML:

<div id="topmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Developer's Blog</a></li>
</ul>
</div> 

Y me CSS:

Código:

/* Top-Menu */
#topmenu
{
	color: #FFF;
	background-color: #616D7E;
	height: 50px;		
}

#topmenu ul li a
{	
	float: left;
	color: #FFF;
	font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
	font-size: 18px;
	margin: 15px 6px 0 6px;
	text-decoration: underline;
}

Se agradecen mucho las ideas.

[Carlangueitor]

Fácil, solo agrega en #topemenu, margin: 0 auto; es la forma en que puedes centrar con CSS.

Saludos

[fladur]

Iniciado por Carlangueitor

Fácil, solo agrega en #topemenu, margin: 0 auto; es la forma en que puedes centrar con CSS.

Saludos

Aun asi me aparece a la izquierda en firefox (aun no checo los demas). Pero puedo moverlo con float: right por ejemplo.

[ArturoGallegos]

Iniciado por Carlangueitor

Fácil, solo agrega en #topemenu, margin: 0 auto; es la forma en que puedes centrar con CSS.

#topemenu no tiene ancho fijo por lo que no funcionara con margin:0 auto;

yo usaría text-align:center;

[Carlangueitor]

Iniciado por Ag666

#topemenu no tiene ancho fijo por lo que no funcionara con margin:0 auto;

yo usaría text-align:center;

Cierto, necesita un ancho fijo, y text-align no funcionara con elementos de bloque como el UL.

[ArturoGallegos]

Iniciado por Carlangueitor

Cierto, necesita un ancho fijo, y text-align no funcionara con elementos de bloque como el UL.

jeje ok toda la razón como el lo tenia no funciona, así que le propongo cambie su código por este:

Código CSS:

/* Top-Menu */
#topmenu{
    color: #FFF; 
    background-color: #616D7E; 
    height: 50px; 
    text-align:center;
    }
#topmenu ul{
    list-style: none;
    }
#topmenu li{
    display:inline; 
    margin:0 6px; 
    line-height:50px;
    }
#topmenu ul li a {
    color: #FFF; 
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
    font-size: 18px; 
    text-decoration: underline;
    }
 

[jomaruro]

Hola:

Pon en el inicio de tu css lo siguiente:

Código CSS:

* {padding:0; margin:0 auto;}
 

Saludos.