Centrar elementos menú

[lamenenchu]

Holaaa...

Estoy intentado centrar los elementos de mi menú, pero no veo por donde debo 'atacar'.

Este es mi código:

Código:

<nav class="nav">
					<ul class="nav-list">
						<li class="nav-item"><a class="current-demo" href="#">Inicio</a></li>
						<li class="nav-item"><a href="sobremi.html">Sobre mí</a></li>
						<li class="nav-item"><a href="portafolio.html">Portafolio</a></li>
						<li class="nav-item"><a href="contacto.html">Contacto</a></li>
					</ul>
				</nav>

y estos los estilos:

Código:

.nav {
	position:relative;
	
	font-size:1.1em;
	font-weight:900;
    width: 100%;
    border-top: 1px solid mediumspringgreen;
    background: rgba(0, 0, 0, 0.3);
}

.nav-item {
	float:left;
	display:inline;
    list-style: none;
    font-size: 1.2em;
        
	
}
a.current-demo,
a.current-demo:hover{
    color: #fff;
}
.nav-item a {
	display:block;
	padding:0.5em 1.5em;
	color:mediumspringgreen;
	background:transparent;
    font-weight: normal;
    
}
.nav-list{
   

}
.nav-item a:hover {
	color: #fff;
}
/* Mobile Navigation */
.nav-mobile {
	display:none; /* Hide from browsers that don't support media queries */
	cursor:pointer;
	position:absolute;
	top:0;
	right:0;
	background:transparent url(../img/estrella1a.png) no-repeat center center;
	height:40px;
	width:40px;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
}

/*-----------Media Queries-------------------------*\
    
@media only screen and (min-width: 320px) and (max-width: 768px) {
	.nav-mobile {
		display:block;
	}
	.nav {
		width:100%;
		padding:40px 0 0;
	}
	.nav-list {
		display:none;
	}
	.nav-item {
		width:100%;
		float:none;
	}
	.nav-item a {
		
		
	}
	
	.nav-active {
		display:block;
        
	}
	.nav-mobile-open {
		border-radius:5px 5px 0 0;
		-webkit-border-radius:5px 5px 0 0;
		-moz-border-radius:5px 5px 0 0;
	}
}

Gracias

[xfxstudios]

prueba creandole un padding, de esa manera los enlaces quedan dentrados, algo asi:

Código HTML:

<style>
.menu{
    float:left;
}
.menu a{
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:10px;
    background-color:#00437B;
    color:#fff;
    margin-left:25px;
}
</style>
<ul>
    <li class="menu"><a href="">Primer ITEM</a></li>
    <li class="menu"><a href="">Segundo ITEM</a></li>
</ul>
 

[lamenenchu]

Iniciado por xfxstudios

prueba creandole un padding, de esa manera los enlaces quedan dentrados, algo asi:

Código HTML:

<style>
.menu{
    float:left;
}
.menu a{
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:10px;
    background-color:#00437B;
    color:#fff;
    margin-left:25px;
}
</style>
<ul>
    <li class="menu"><a href="">Primer ITEM</a></li>
    <li class="menu"><a href="">Segundo ITEM</a></li>
</ul>
 

Gracias, pero haciendo eso, al ensanchar o estrechar el navegador, no se queda centrado. Si lo ajusto con el navegador abierto al 100% si se ve bien, pero a medida que voy cerrando el navegador, se van descentrando.

[AngelKrak]

especificale un width a tu "contenedor" del menu y centralos con margin ;)

algo asi:

Código CSS:

.nav-list{
   width: 60%;
  margin: 0 auto;
 
}
 

Demo:
http://codepen.io/anon/pen/Vvbmmd?editors=110

[lamenenchu]

Iniciado por AngelKrak

especificale un width a tu "contenedor" del menu y centralos con margin ;)

algo asi:

Código CSS:

.nav-list{
   width: 60%;
  margin: 0 auto;
 
}
 

Demo:
http://codepen.io/anon/pen/Vvbmmd?editors=110

Gracias AngelKrak, pero no es eso. Ya lo tenía así pero no se centra.

[xfxstudios]

entonces explica graficamente que tipo de centrado es, para asi no dar tumbos

[lamenenchu]

Osea si que funciona pero si hago la pagina más ancha o estrecha entonces ya no cuadra. Con el navegador al 100% si queda centrado, a la que voy disminuyendo el ancho del navegador, se descentra

[lamenenchu]

Iniciado por xfxstudios

entonces explica graficamente que tipo de centrado es, para asi no dar tumbos

cuelgo la pagina y lo veis.

http://silviamenen.com/

[PedroDesing]

Yo uso algo tan fácil como un text-align:center al ul.

[lamenenchu]

Si. En realidad debería ser así de fácil. Pero no sé porque lo fácil se vuelve difícil. Tampoco me sirve. PEro gracias. Voy a volver a revisar el código desde el principio.

[AngelKrak]

para tu menu, prueba con esto amiga, y dime si te funciona ;)

1.- Busca .nav-list y cambia tu margin: 0 0 0 35%; por margin: auto; y por cierto no se necesita el height: auto;.

2.- Busca .nav-item y Quita/Borra el float: left; y cambia tu display: inline; por display: inline-block;.

Con eso debe de quedar centrado como quieres ;)

[lamenenchu]

Iniciado por AngelKrak

para tu menu, prueba con esto amiga, y dime si te funciona ;)

1.- Busca .nav-list y cambia tu margin: 0 0 0 35%; por margin: auto; y por cierto no se necesita el height: auto;.

2.- Busca .nav-item y Quita/Borra el float: left; y cambia tu display: inline; por display: inline-block;.

Con eso debe de quedar centrado como quieres ;)

Siiiiii....
Muchas gracias 'Krak'.

Ainsss... haciendo difícil lo fácil