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