Centrar texto

leoass · #1 (**permalink**) 12/10/2013, 10:04

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/* el menú en si mismo */
  .mi-menu  {
    border-radius: 5px;
    list-style-type: none;
    margin: 0 auto; /* si queremos centrarlo */
    padding: 0;
    /* la altura y su ancho dependerán de los textos */
    height: 40px; 
    width:auto;
    /* el color de fondo */
    background: #555;
    background: -moz-linear-gradient(#555,#222);
    background: -webkit-linear-gradient(#555,#222);
    background: -o-linear-gradient(#555,#222);
    background: -ms-linear-gradient(#555,#222);
    background: linear-gradient(#555,#222);
  }
 
  /* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML */
  .mi-menu  br { display:none; }
 
  /* cada item del menu */
  .mi-menu  li {
    display: block;
    float: left; /* la lista se ve horizontal */
    height: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }
  .mi-menu li a {
    border-left: 1px solid #000;
    border-right: 1px solid #666;
    color: #EEE;
    display: block;
    font-family: Tahoma;
    font-size: 13px;
    font-weight: bold;
    line-height: 28px;
    padding: 0 14px;
    margin: 6px 0;
    text-decoration: none;
    /* animamos el cambio de color de los textos */
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
  }
  /* eliminamos los bordes del primer y el último */
  .mi-menu li:first-child a { border-left: none; }
  .mi-menu li:last-child a{ border-right: none; }
  /* efecto hover cambia el color */
  .mi-menu li:hover > a { color: Crimson; }
 
  /* los submenús */
  .mi-menu ul {
    border-radius: 0 0 5px 5px;
    left: 0;
    margin: 0;
    opacity: 0; /* no son visibles */
    position: absolute;
    padding: 0;
    top: 40px; /* se ubican debajo del enlace principal */
    /* el color de fondo */
    background: #222;
    background: -moz-linear-gradient(#222,#555);
    background: -webkit-linear-gradient(#22,#555);
    background: -o-linear-gradient(#222,#555);
    background: -ms-linear-gradient(#222,#555);
    background: linear-gradient(#222,#555);
    /* animamos su visibildiad */
    -moz-transition: opacity .25s ease .1s;
    -webkit-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
  }
  /* son visibles al poner el cursor encima */
  .mi-menu li:hover > ul { opacity: 1; }
 
   /* cada uno de los items de los submenús */
  .mi-menu ul li {
    height: 0; /* no son visibles */
    overflow: hidden;
    padding: 0;
    margin:0;
    /* animamos su visibildiad */
    -moz-transition: height .25s ease .1s;
    -webkit-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
  }
  .mi-menu li:hover > ul li {
    height: 36px; /* los mostramos */
    overflow: visible;
    padding: 0;
  }
  .mi-menu ul li a {
    border: none;
    border-bottom: 1px solid #111;
    margin: 0;
    /* el ancho dependerá de los textos a utilizar */
    
    width: 100px;
  }
  /* el último no tiene un borde */
  .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 :)

Crazylegs · #2 (**permalink**) 12/10/2013, 13:29

Hola, he estado trasteando con el código, y he llegado a esta solución:

Código CSS:

Ver original#contenedor{
        border-radius: 5px;
       /* el color de fondo */
        background: #555;
        background: -moz-linear-gradient(#555,#222);
        background: -webkit-linear-gradient(#555,#222);
        background: -o-linear-gradient(#555,#222);
        background: -ms-linear-gradient(#555,#222);
        background: linear-gradient(#555,#222);
        width:auto;
    
  }
/* el menú en si mismo */
      .mi-menu  {
        list-style-type: none;
        margin: 0 auto; /* si queremos centrarlo */
        padding: 0;
        /* la altura y su ancho dependerán de los textos */
        height: 40px;
        width:407px; /*407 porque hay 4 <li> de 130, 115, 85 y 77 pixeles de ancho. La suma de estos es 407px*/
       
      }

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.

pzin · #3 (**permalink**) 12/10/2013, 14:21

Si busques que se ajuste todo al contenido del menú, la cosa pasa por usar inline-blocks:

Crazylegs · #4 (**permalink**) 12/10/2013, 15:22

Cita:

Iniciado por pzin

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#contenedor{
            border-radius: 5px;
           /* el color de fondo */
            background: #555;
            background: -moz-linear-gradient(#555,#222);
            background: -webkit-linear-gradient(#555,#222);
            background: -o-linear-gradient(#555,#222);
            background: -ms-linear-gradient(#555,#222);
            background: linear-gradient(#555,#222);
            width:auto;
             text-align:center;
      }
    /* el menú en si mismo */
          .mi-menu  {
            display:inline-block;
            list-style-type: none;
            margin: 0 auto; /* si queremos centrarlo */
            padding: 0;
            /* la altura y su ancho dependerán de los textos */
            height: 40px;
          }