Foros del Web » Creando para Internet » CSS »

Centrar texto

 Estas en el tema de Centrar texto en el foro de CSS en Foros del Web. Buenas. Hoy vengo con este lio: Quiero centrar el menu superior. Quiero que quede en el meio e la pantalla pero sin achicar el tamaño ...
  #1 (permalink)  
Antiguo 12/10/2013, 10:04
 
Fecha de Ingreso: octubre-2010
Ubicación: La Plata
Mensajes: 63
Antigüedad: 13 años, 6 meses
Puntos: 0
Pregunta Centrar texto
Buenas. Hoy vengo con este lio:

Quiero centrar el menu superior. Quiero que quede en el meio e la pantalla pero sin achicar el tamaño del menu. vean la imagen para entender



Aqui el codigo:

HTML

Código HTML:
<div id="contenedor"> 
		<ul class="mi-menu">
			<li><a href="index.html"> Pagina principal </a></li>
			<li>
				<a href="#">Meditaciones</a>
				<ul>
					<li><a href="URL_enlace_2.1">Submenu 2.1 </a></li>
					<li><a href="URL_enlace_2.2">Submenu 2.2</a></li>
					<li><a href="URL_enlace_2.3">Submenu 2.3</a></li>
				</ul>
			</li>
			<li>
				<a href="pagina 2.html">Pagina 2</a>
				<ul>
					<li><a href="URL_enlace_2.1">Submenu 2.1 </a></li>
					<li><a href="URL_enlace_2.2">Submenu 2.2</a></li>
					<li><a href="URL_enlace_2.3">Submenu 2.3</a></li>
				</ul>
			</li>
			<li>
				<a href="URL_enlace_3">Enlaces</a>
				<ul>
					<li><a href="URL_enlace_2.1">Submenu 2.1 </a></li>
					<li><a href="URL_enlace_2.2">Submenu 2.2</a></li>
					<li><a href="URL_enlace_2.3">Submenu 2.3</a></li>
				</ul>
			</li>
		</ul>
	</div>
CSS

Código CSS: 
Ver original
  1. /* el menú en si mismo */
  2.   .mi-menu  {
  3.     border-radius: 5px;
  4.     list-style-type: none;
  5.     margin: 0 auto; /* si queremos centrarlo */
  6.     padding: 0;
  7.     /* la altura y su ancho dependerán de los textos */
  8.     height: 40px; 
  9.     width:auto;
  10.     /* el color de fondo */
  11.     background: #555;
  12.     background: -moz-linear-gradient(#555,#222);
  13.     background: -webkit-linear-gradient(#555,#222);
  14.     background: -o-linear-gradient(#555,#222);
  15.     background: -ms-linear-gradient(#555,#222);
  16.     background: linear-gradient(#555,#222);
  17.   }
  18.  
  19.   /* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML */
  20.   .mi-menu  br { display:none; }
  21.  
  22.   /* cada item del menu */
  23.   .mi-menu  li {
  24.     display: block;
  25.     float: left; /* la lista se ve horizontal */
  26.     height: 40px;
  27.     list-style: none;
  28.     margin: 0;
  29.     padding: 0;
  30.     position: relative;
  31.   }
  32.   .mi-menu li a {
  33.     border-left: 1px solid #000;
  34.     border-right: 1px solid #666;
  35.     color: #EEE;
  36.     display: block;
  37.     font-family: Tahoma;
  38.     font-size: 13px;
  39.     font-weight: bold;
  40.     line-height: 28px;
  41.     padding: 0 14px;
  42.     margin: 6px 0;
  43.     text-decoration: none;
  44.     /* animamos el cambio de color de los textos */
  45.     -webkit-transition: color .2s ease-in-out;
  46.     -moz-transition: color .2s ease-in-out;
  47.     -o-transition: color .2s ease-in-out;
  48.     -ms-transition: color .2s ease-in-out;
  49.     transition: color .2s ease-in-out;
  50.   }
  51.   /* eliminamos los bordes del primer y el último */
  52.   .mi-menu li:first-child a { border-left: none; }
  53.   .mi-menu li:last-child a{ border-right: none; }
  54.   /* efecto hover cambia el color */
  55.   .mi-menu li:hover > a { color: Crimson; }
  56.  
  57.   /* los submenús */
  58.   .mi-menu ul {
  59.     border-radius: 0 0 5px 5px;
  60.     left: 0;
  61.     margin: 0;
  62.     opacity: 0; /* no son visibles */
  63.     position: absolute;
  64.     padding: 0;
  65.     top: 40px; /* se ubican debajo del enlace principal */
  66.     /* el color de fondo */
  67.     background: #222;
  68.     background: -moz-linear-gradient(#222,#555);
  69.     background: -webkit-linear-gradient(#22,#555);
  70.     background: -o-linear-gradient(#222,#555);
  71.     background: -ms-linear-gradient(#222,#555);
  72.     background: linear-gradient(#222,#555);
  73.     /* animamos su visibildiad */
  74.     -moz-transition: opacity .25s ease .1s;
  75.     -webkit-transition: opacity .25s ease .1s;
  76.     -o-transition: opacity .25s ease .1s;
  77.     -ms-transition: opacity .25s ease .1s;
  78.     transition: opacity .25s ease .1s;
  79.   }
  80.   /* son visibles al poner el cursor encima */
  81.   .mi-menu li:hover > ul { opacity: 1; }
  82.  
  83.    /* cada uno de los items de los submenús */
  84.   .mi-menu ul li {
  85.     height: 0; /* no son visibles */
  86.     overflow: hidden;
  87.     padding: 0;
  88.     margin:0;
  89.     /* animamos su visibildiad */
  90.     -moz-transition: height .25s ease .1s;
  91.     -webkit-transition: height .25s ease .1s;
  92.     -o-transition: height .25s ease .1s;
  93.     -ms-transition: height .25s ease .1s;
  94.     transition: height .25s ease .1s;
  95.   }
  96.   .mi-menu li:hover > ul li {
  97.     height: 36px; /* los mostramos */
  98.     overflow: visible;
  99.     padding: 0;
  100.   }
  101.   .mi-menu ul li a {
  102.     border: none;
  103.     border-bottom: 1px solid #111;
  104.     margin: 0;
  105.     /* el ancho dependerá de los textos a utilizar */
  106.     
  107.     width: 100px;
  108.   }
  109.   /* el último no tiene un borde */
  110.   .mi-menu ul li:last-child a { border: none; }

Como veran, hay muchas anotaciones. El por que es que edito cuando tengo un poco de tiempo libre. Y para recordar mas facil son utiles :)
  #2 (permalink)  
Antiguo 12/10/2013, 13:29
Avatar de Crazylegs  
Fecha de Ingreso: septiembre-2013
Ubicación: Barcelona
Mensajes: 74
Antigüedad: 10 años, 7 meses
Puntos: 14
Respuesta: Centrar texto
Hola, he estado trasteando con el código, y he llegado a esta solución:
Código CSS: 
Ver original
  1. #contenedor{
  2.         border-radius: 5px;
  3.        /* el color de fondo */
  4.         background: #555;
  5.         background: -moz-linear-gradient(#555,#222);
  6.         background: -webkit-linear-gradient(#555,#222);
  7.         background: -o-linear-gradient(#555,#222);
  8.         background: -ms-linear-gradient(#555,#222);
  9.         background: linear-gradient(#555,#222);
  10.         width:auto;
  11.     
  12.   }
  13. /* el menú en si mismo */
  14.       .mi-menu  {
  15.         list-style-type: none;
  16.         margin: 0 auto; /* si queremos centrarlo */
  17.         padding: 0;
  18.         /* la altura y su ancho dependerán de los textos */
  19.         height: 40px;
  20.         width:407px; /*407 porque hay 4 <li> de 130, 115, 85 y 77 pixeles de ancho. La suma de estos es 407px*/
  21.        
  22.       }

Funciona, pero tiene el inconveniente de que si añades, modificas, o eliminas un <li> tienes que cambiar el ancho del menú.

¿Era eso lo que querias conseguir? ,Pruebalo y me cuentas, porque con la imagen tan pequeña a penas se puede apreciar.
__________________
¡Mira mis tutoriales web!
  #3 (permalink)  
Antiguo 12/10/2013, 14:21
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Centrar texto
Si busques que se ajuste todo al contenido del menú, la cosa pasa por usar inline-blocks:
  #4 (permalink)  
Antiguo 12/10/2013, 15:22
Avatar de Crazylegs  
Fecha de Ingreso: septiembre-2013
Ubicación: Barcelona
Mensajes: 74
Antigüedad: 10 años, 7 meses
Puntos: 14
Respuesta: Centrar texto
Cita:
Iniciado por pzin Ver Mensaje
Si busques que se ajuste todo al contenido del menú, la cosa pasa por usar inline-blocks:

Sí, cierto, lo estaba probando con el display:inline-block pero no se me centraba con el margin: auto, lo necesitaba era el text-align:center porque con inline-block se comporta como texto.

El CSS pues quedaría así:
Código CSS: 
Ver original
  1. #contenedor{
  2.             border-radius: 5px;
  3.            /* el color de fondo */
  4.             background: #555;
  5.             background: -moz-linear-gradient(#555,#222);
  6.             background: -webkit-linear-gradient(#555,#222);
  7.             background: -o-linear-gradient(#555,#222);
  8.             background: -ms-linear-gradient(#555,#222);
  9.             background: linear-gradient(#555,#222);
  10.             width:auto;
  11.              text-align:center;
  12.       }
  13.     /* el menú en si mismo */
  14.           .mi-menu  {
  15.             display:inline-block;
  16.             list-style-type: none;
  17.             margin: 0 auto; /* si queremos centrarlo */
  18.             padding: 0;
  19.             /* la altura y su ancho dependerán de los textos */
  20.             height: 40px;
  21.           }
__________________
¡Mira mis tutoriales web!

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:34.