Tema: Centrar un menú horizontal!
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/09/2013, 22:33
plitre_sys19
 
Fecha de Ingreso: septiembre-2011
Mensajes: 233
Antigüedad: 13 años, 2 meses
Puntos: 1
Centrar un menú horizontal!
Hola! Tengo problemita he seguido un tutorial para realizar un menú horizontal, y la verdad me ha resultado muy útil, pero el problema que se me presenta es: en centrar el texto de un menú, he intentado con la propiedad text-align:center y nada por casualidad sabrán que es lo que me falta para que el texto pueda centrarse?

Código HTML: 
Ver original
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.     <title>Prueba</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <style type="text/css">
  7.   /* el menú en si mismo */
  8.   .mi-menu  {
  9.     border-radius: 5px;
  10.     list-style-type: none;
  11.     margin: 0 auto; /* si queremos centrarlo */
  12.     padding: 0
  13.     text:center;
  14.     margin-left: center;
  15.     /* la altura y su ancho dependerán de los textos */
  16.     height:40px;
  17.     width: 960px;
  18.     /* el color de fondo */
  19.     background: #555;
  20.     background: -moz-linear-gradient(#555,#222);
  21.     background: -webkit-linear-gradient(#555,#222);
  22.     background: -o-linear-gradient(#555,#222);
  23.     background: -ms-linear-gradient(#555,#222);
  24.     background: linear-gradient(#555,#222);
  25.   }
  26.  
  27.   /* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML */
  28.   .mi-menu  br { display:none; }
  29.  
  30.   /* cada item del menu */
  31.   .mi-menu  li {
  32.     display: block;
  33.     float: left; /* la lista se ve horizontal */
  34.     height: 40px;
  35.     list-style: none;
  36.     margin: 0;
  37.     padding: 0;
  38.     position: relative;
  39.   }
  40.   .mi-menu li a {
  41.     border-left: 1px solid #000;
  42.     border-right: 1px solid #666;
  43.     color: #EEE;
  44.     display: block;
  45.     font-family: Tahoma;
  46.     font-size: 13px;
  47.     font-weight: bold;
  48.     line-height: 28px;
  49.     padding: 0 14px;
  50.     margin: 6px 0;
  51.     text-decoration: none;
  52.     /* animamos el cambio de color de los textos */
  53.     -webkit-transition: color .2s ease-in-out;
  54.     -moz-transition: color .2s ease-in-out;
  55.     -o-transition: color .2s ease-in-out;
  56.     -ms-transition: color .2s ease-in-out;
  57.     transition: color .2s ease-in-out;
  58.   }
  59.   /* eliminamos los bordes del primer y el último */
  60.   .mi-menu li:first-child a { border-left: none; }
  61.   .mi-menu li:last-child a{ border-right: none; }
  62.   /* efecto hover cambia el color */
  63.   .mi-menu li:hover > a { color: Crimson; }
  64.  
  65.   /* los submenús */
  66.   .mi-menu ul {
  67.     border-radius: 0 0 5px 5px;
  68.     left: 0;
  69.     margin: 0;
  70.     opacity: 0; /* no son visibles */
  71.     position: absolute;
  72.     top: 40px; /* se ubican debajo del enlace principal */
  73.     /* el color de fondo */
  74.     background: #222;
  75.     background: -moz-linear-gradient(#222,#555);
  76.     background: -webkit-linear-gradient(#22,#555);
  77.     background: -o-linear-gradient(#222,#555);
  78.     background: -ms-linear-gradient(#222,#555);
  79.     background: linear-gradient(#222,#555);
  80.     /* animamos su visibildiad */
  81.     -moz-transition: opacity .25s ease .1s;
  82.     -webkit-transition: opacity .25s ease .1s;
  83.     -o-transition: opacity .25s ease .1s;
  84.     -ms-transition: opacity .25s ease .1s;
  85.     transition: opacity .25s ease .1s;
  86.   }
  87.   /* son visibes al poner el cursor encima */
  88.   .mi-menu li:hover > ul { opacity: 1; }
  89.  
  90.    /* cada un ode los items de los submenús */
  91.   .mi-menu ul li {
  92.     height: 0; /* no son visibles */
  93.     overflow: hidden;
  94.     padding: 0;
  95.     /* animamos su visibildiad */
  96.     -moz-transition: height .25s ease .1s;
  97.     -webkit-transition: height .25s ease .1s;
  98.     -o-transition: height .25s ease .1s;
  99.     -ms-transition: height .25s ease .1s;
  100.     transition: height .25s ease .1s;
  101.   }
  102.   .mi-menu li:hover > ul li {
  103.     height: 36px; /* los mostramos */
  104.     overflow: visible;
  105.     padding: 0;
  106.   }
  107.   .mi-menu ul li a {
  108.     border: none;
  109.     border-bottom: 1px solid #111;
  110.     margin: 0;
  111.     /* el ancho dependerá de los textos a utilizar */
  112.     padding: 5px 20px;
  113.     width: 100px;
  114.   }
  115.   /* el último n otiene un borde */
  116.   .mi-menu ul li:last-child a { border: none; }
  117.  
  118. </style>
  119.         </head>
  120.     <body>
  121.     <ul class="mi-menu">
  122.   <li><a href="URL_enlace_1">Inicio</a></li>
  123.   <li>
  124.     <a href="#">Item 1</a>
  125.     <ul>
  126.     <li><a href="#">Sub Item</a></li>
  127.     </ul>
  128.     <li><a href="#">Item 2</a>
  129.     <ul>
  130.       <li><a href="URL_enlace_2.1">Sub Item 1</a></li>
  131.       <li><a href="URL_enlace_2.2">Sub Item 2</a></li>
  132.       <li><a href="URL_enlace_2.3">Sub Item 3</a></li>
  133.     </ul>
  134.   </li>
  135.   <li><a href="URL_enlace_3">Item 3</a>
  136.   <ul>
  137.     <li><a href="URL_enlace_2.1">Sub Item 1</a>
  138.   </ul>
  139.   </li>
  140.   <li><a href="URL_enlace_3">Item 4</a></li>
  141.   <li><a href="URL_enlace_3">Item 5</a></li>
  142. </ul>
  143.     </body>
  144. </html>
Última edición por pzin; 24/09/2013 a las 10:00 Razón: formato código