[SOLUCIONADO] Centrar los textos de menu responsive

auroaff · #1 (**permalink**) 16/08/2017, 18:36

Hola, estoy armando un menu responsive, está centrado el area de color del menú, pero los botones del menú están alineados a la derecha y el lado izquierdo solo con el exceso de color. Y me gustaría que los botones también esten centrados, y por lo tanto en ambos lados queden los excesos. Le dejo mi codigo, gracias por cualquier pista. Este es el menu, deseo centrar sus elementos: http://www.falconmasters.com/demos/m...le_responsive/

html:

Código HTML:

<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="estilos_menu2.css">
<link rel="stylesheet" href="fonts.css">
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script src="main.js"></script>
</head>

<body>

<header>
	<div class="menu_bar">
    	<a href="#" class="bt-menu"><span class="icon-menu3"></span>Menu</a>
	</div>
    
    <nav>
    <ul>
		<li><a href="#" class="s1"><span class="icon-home"></span>Inicio</a></li>
        <li><a href="#" class="s2"><span class="icon-briefcase"></span>Trabajos</a></li>
        <li class="submenu">
        	<li><a href="#"><span class="icon-clipboard"></span>proyectos<span class="caret icon-menu3"> </span></a>
             <ul class="children">
             	<li> <a href="#">subElemento 1</a></li>
                <li> <a href="#">subElemento 2</a></li>
                <li> <a href="#">subElemento 3</a></li>
                             
                
            </ul>    
         </li>
		<li><a href="#" class="s3"><span class="icon-accessibility"></span>Servicios</a></li>
        <li><a href="#" class="s4"><span class="icon-mail4"></span>Contactos</a></li>

	</ul>
    
    
    </nav>
    
 </header>
 
<section>
 <p>Hay muchas variaciones de los pasajes de Lorem Ipsum disponibles, pero la mayoría sufrió alteraciones en alguna manera, ya sea porque se le agregó humor, o palabras aleatorias que no parecen ni un poco creíbles. Si vas a utilizar un pasaje de Lorem Ipsum, necesitás estar seguro de que no hay nada avergonzante escondido en el medio del texto. Todos los generadores de Lorem Ipsum que se encuentran en Internet tienden a repetir trozos predefinidos cuando sea necesario, haciendo a este el único generador verdadero (válido) en la Internet. </p>
 

 </section>


</body>

y el css

Código:

* {
	padding:0;
	margin:0;
	-webkit-box-sizing: border_box;
	-moz-box-sizing: border-box;
}

body {background:#FEFEFE;}

.menu_bar {
	display:none;
}

header nav .s1 {
	background:#9C0;
	}

header {
	width: 100%;
}

header nav {
	background:#023859;
	z-indez:1000;
	max-width: 1000px;
	width: 90%;
	margin:20px auto;
	
}

header nav ul {
	list-style:none;
}

header nav ul li {
display:inline-block;
position:relative;

}

header nav ul li:hover {
	background:#E6344A;
	}

header nav ul li a {
	color:#fff;
	display:block;
	text-decoration:none;
	padding: 20px;
	
}

header nav ul li a span {
	margin-right:10px;
	
	}

header nav ul li:hover .children {
	display:block;
	
}
	
header nav ul li .children {
	display:none;
	background:#011826;
	position:absolute;
	width:150%;
	z-index:1000;
}	

header nav ul li .children li{
	display:block;
	border-bottom: 1px solid rgba(255,255,255,.5);	
}

header nav ul li .caret{
	position:relative;
	top:3px;
	margin-left:10px;
	margin-right:0px;
}


@media screen and (max-width: 800px) {
	body {
		padding-top:80px;
		}
		
		.menu_bar {
		display:block;
		width:100%;
		position:fixed;
		top:0;
		background:#E6344A;	
		}
		
	.menu_bar .bt-menu {
		display:block;
		padding:20px;
		color:#fff;
		overflow:hidden;
		font-size:25px;
		font-weight:bold;
		text-decoration:none;
		
		}	
	.menu_bar span {
		float: right;
		font-size: 40ppx;
		
		}
	header nav {
		width: 80%;
		position:fixed;
		margin:0;
		left:0;
		overflow: scroll;
		height: calc (100% - 80px);
		
		
		}
	header nav ul li {
		display: block;
		border-bottom:1px solid rgba(255,255,255, .5);
		}
	
	header nav ul li a{ 
	display: block;
	}
	
	header nav ul li .children{ 
	width: 100%;
	position:relative;
	
	}
	
	}

auroaff · #2 (**permalink**) 16/08/2017, 21:45

Hola, la solución, era poner text align-center en el contenedor padre, que en este caso es header.

Código HTML:

header {
	width: 100%;
	text-align:center;
}