Cómo centrar la barra de menú horizontalmente en todas las pantallas

  • Autor Autor joelandy14
  • Fecha de inicio Fecha de inicio
joelandy14

joelandy14

VIP
Iota
Verificado
Verificación en dos pasos activada
Suscripción a IA
Alguien sabe como centrar la barra de menu? ya sea para todo tipo de tamaño de pantalla

12547d1362717488-centrar-menu-horizontal-menu.jpg


Dejo algunos Datos haber si le sirve:

STYLO.CSS
Insertar CODE, HTML o PHP:
#contenedorprincipal #menu #apDiv1 {
	text-align: center;
	width: 100%;
}


#contenedorprincipal #menu {
	height: 50px;
	width: 100%;
	background-image: url(../images/fondo_menu.png);
	font-family: "Arial Narrow";
	font-size: 24px;
	font-weight: normal;
	text-decoration: none; }

#Menu_1 {
	position:absolute;
	left:189px;
	top:0px;
	width:75px;
	height:44px;
	z-index:1;
}
#menu_2 {
	position:absolute;
	left:298px;
	top:0px;
	width:90px;
	height:44px;
	z-index:2;
}
#menu_3 {
	position:absolute;
	left:421px;
	top:0px;
	width:105px;
	height:44px;
	z-index:3;
}
#menu_4 {
	position:absolute;
	left:543px;
	top:0px;
	width:130px;
	height:44px;
	z-index:4;
}
#menu_5 {
	position:absolute;
	left:665px;
	top:0px;
	width:90px;
	height:44px;
	z-index:5;
}
#apDiv1 {
	position:absolute;
	top:auto;
	width:100%;
	height:48px;
	z-index:6;
	text-align: center;
}


HTML:
Insertar CODE, HTML o PHP:
  <div id="menu">
   <div id="apDiv1">
  <div id="Menu_1"><a class='zoomIt' href="#">INICIO</a></div>
  <div id="menu_2"><a class='zoomIt' href="#">MISION</a></div>
  <div id="menu_3"><a class='zoomIt' href="#">GALERIA</a></div>
  <div id="menu_4"><a class='zoomIt' href="#">CONTACTO</a></div>
  <div id="menu_5"><a class='zoomIt' href="#">MAPA</a></div>
  </div>
</div>
 

Adjuntos

  • menu.webp
    menu.webp
    13,3 KB · Visitas: 1.427
Trata de añadir esto al css
Insertar CODE, HTML o PHP:
text-align: center;
 
Con lo que te dijo [MENTION=37728]KevinCastro[/MENTION] centras el texto. Si quieres centrar un div que no sólo sea texto añade

margin:0 auto 0 auto; width:390px;

Al div que quieras, siendo width el tamaño que quieres darle a ese div.

PD: siento no ponerlo en forma de code. Cuando llegue a casa lo edito.
 
Solo añadiendo " margin:0 auto; " al css correspondiente al div (id o class) que quieras centrar quedara al centro sea cual sea la resolución.

También lo puedes hacer mediante un estilo inline utilizando style="margin:0 auto;" pero no es muy bien visto por los buscadores y es mucho mas tardado.
 
Como ya te dijeron , solo dale una regla al div que tiene el menu con la propiedad margin : auto, en izquierda y derecha .
asi sea cual sea la resolucion de pantalla el div del menu se centrara , tambien sera necesario centrar los demas divs de tu web , si no se vera descuadrado todo.
 
Atrás
Arriba