Imposible centrar texto en un menu

wesse · #1 (**permalink**) 21/06/2013, 12:13

Hola buenas!
Estoy venga a darle vueltas y es que no consigo centrar el texto de este menu horizontal. No funciona ni en firefox ni en internet explorer. alguna sugerencia?

Código HTML:

<style type="text/css">
<!--
#menu{background-color:#ccc; width:550px; height:39px; margin: 110 0 0 0; float: right;}
#menu li{float:left;list-style:none;font-weight: bold;font-size:14px;}
#menu li a{color:#3F2F22;text-decoration:none;padding:4px 10px;display:block;}
#menu li a:hover{color:#FAF6DB; background:#000000}
#menu li img{margin:5px}

-->
</style>
</head>

<body>
  <div id="cabecera"> 
    <ul id="menu">
      <li id="ac"><a href="a.htm">index</a></li>
      <li><a href="a.htm">somos</a></li>
      <li><a href="a.htm">estamos</a></li>
      <li><a href="a.htm">contacto</a></li>
    </ul>
  </div>
</body>

#2 (**permalink**) 21/06/2013, 14:28

Hola wesse,

Para centrar los elementos horizontalmente yo usaría Flexible Box Model o Flexbox.

Ahora bien, antes de aplicarlo te voy a decir dos cosas:

Este es un modelo de cajas bajo revisión, por lo que está sujeto a cambios, actualizaciones o reemplazos.
Las propiedades que voy a usar están desactualizadas. Es más, si uno se fija el borrador de la W3C puede ver que han cambiado las propiedades. Sin embargo los browsers, (por lo menos Chrome que es el que uso siempre - Firefox no uso - ) no soporta las nuevas propiedades. Por tal motivo utilizo las propiedades viejas.

De todas maneras creo yo que nunca está de más empezar a aprender algo nuevo aún más siendo que es candidato de ser un estándar. Cuando los browsers se actualicen a lo que dispone la W3C producto del trabajo del CSS Work Group (CSS WG), basta con leer el borrador y actualizar nuestro código.

Bueno, ahora vamos a tu problema:

Para utilizar Flexbox, primero debes agregar las siguientes clases:

p-flexbox y flex-hcc

Donde:

p-flexbox significa parent-flexbox, y
flex-hcc significa flexbox-horizontal-center-center

Por lo tanto en tu código HTML deberías poner lo siguiente:

Código HTML:

<div id="cabecera" class="p-flexbox flex-hcc">
 <!-- el resto de tu contenido -->
</div>

Por último para que todo quede bien, deberías poner las siguientes reglas CSS:

Código:

.p-flexbox {

   /* Flexbox: Init setup */

   display: -webkit-box;
   display: -moz-box;
   display: box;
}

.flex-hcc {

   /* Flexbox: Principal setup */

   -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
           box-orient: horizontal;

   -webkit-box-pack: center;
      -moz-box-pack: center;
           box-pack: center;

   -webkit-box-align: center;
      -moz-box-align: center;
           box-align: center;
}

Acá te dejo un fiddle para que veas como queda el resultado:

http://jsfiddle.net/F8EG7/

BWT, te dejo un par de "sugerencias":

No abuses del uso de ids. Creo que es mejor usar clases. De esa manera si en el futuro te das cuenta de que existe otro elemento que necesita el mismo estilo, basta con agregarle la clase.
Poné tu código CSS en un archivo externo para facilitar el mantenimiento. Si es el caso de que tu página web tiene poco contenido, pues bien, creo que no habría problema en establecer el estilo en la misma página (ya que garantizamos evitar un acceso al servidor); pero si tu código HTML es bastante largo (lo cual es muy probable a menos que estés experimentando), determina el estilo en un archivo externo. Para ello basta con usar la etiqueta <link> o bien <style> con un @import

Cheers,
Leonardo

pzin · #3 (**permalink**) 21/06/2013, 15:42

Para alinear lo que tienes, casi que es mejor usar inline-block en lugar de flotar los elementos, y aplicar a algún elemento ascentral un text-align: center.

Sobre Flexbox, ya es más que borrador la nueva versión, siendo candidato a recomendación, y de hecho funciona en Chrome, Firefox e IE.
Hace poco Chris Coyier escribió un artículo como guía para Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox

wesse · #4 (**permalink**) 24/06/2013, 07:13

No hay una manera mas simple de hacer un centrado del texto? No puede ser...

pzin · #5 (**permalink**) 24/06/2013, 13:41

Cita:

Iniciado por wesse

No hay una manera mas simple de hacer un centrado del texto? No puede ser...

No es texto lo que quieres centrar, sino los elementos li. Y no sé qué le ves complicado a:

Cita:

Iniciado por pzin

Para alinear lo que tienes, casi que es mejor usar inline-block en lugar de flotar los elementos, y aplicar a algún elemento ascentral un text-align: center.

desiknin · #6 (**permalink**) 24/06/2013, 18:22

Como veis emplear display:table-cell, para poder aplicar text-align:center, sobre la propia lista ul?

[URL="http://jsfiddle.net/Desiknin/WtBv7/"]http://jsfiddle.net/Desiknin/WtBv7/[/URL]

#menu {
background-color:#ccc;
width:550px;
height:39px;
margin: 110 0 0 0;
float: right;
display:table-cell; /*añadido*/
text-align:center; /*añadido*/
}

#menu li {
/*float:left;*/ /*suprimido*/
display:inline; /*añadido*/
list-style:none;
font-weight: bold;
font-size:14px;
}
#menu li a {
color:#3F2F22;
text-decoration:none;
padding:4px 10px;
/*display:block; */ /*suprimido*/
}
#menu li a:hover {
color:#FAF6DB;
background:#000000
}
#menu li img {
margin:5px
}