- Detalles
- Por Juan Padial
- En Programación
- Visto: 5474
Cuándo tenemos un div, o cualquier otro elemento block (vea elementos html inline y elementos block), es muy fácil centrarlos en la página si se conoce su anchura, basta con aplicar un margen "auto" a izquierda y derecha. Por ejemplo:
<style type="text/css">
body {
width: 100%;
}
.inner {
width: 1000px;
margin: 0 auto;
}
</style>
<body>
<div class="inner">
<p>Algo de texto</p>
</body>
</div>
En el ejemplo anterior el body tendría una anchura del 100% de la ventana del navegador, el div de clase inner tendría una anchura de 1000 píxeles y, en caso de que la anchura del body sea mayor a 1000px, este div quedaría centrado horizontalmente. Pero, ¿cómo podemos centrar un div si no tiene una anchura fija?.
Para responder a esta pregunta podemos ir por diferentes caminos. Antes de nada hay que saber que los elementos block, como es el div, o cualquier otro elemento tipo block o aquellos con la propiedad display:block, tiene una anchura determinada por la anchura de su contenedor. Esta regla no se aplica cuando a estos elementos se les aplica un float a izquierda o derecha (float:left o float:right) en cuyo caso la anchura del elemento block pasa a estar determinada por su contenido. Todo esto siempre que no se especifique una anchura determinada para dicho elemento. Teniendo esto en cuenta cómo base, para centrar un div que no tiene anchura fija podemos:
Aplicar al elemento block la propiedad inline-block: si al div le aplicamos a través del código CSS la propiedad inline-block, pasará a compartir propiedades de elemento inline y de elemento block. Entre las características de elemento inline que tendrá la que nos interesa es que la alineación horizontal puede ser controlada por el valor del text-align de su contenedor:
<style type="text/css">
.contenedor {
text-align: center;
}
.centrado {
display: inline-block;
}
</style>
<div class="contenedor">
<div class="centrado">
</div>
</div>
Tener el div a centrar dentro de otro div, ambos con posición relativa, uno exterior con float:right y right:50%, otro interior, el que quedará centrado, con float:left y right:-50%, ambos dentro de un div contenedor. De esta forma, ambos tendrán la anchura definida por su contenido ya que ambos tienen un float. El primero tendrá su extremo derecho justo en el centro del div contenedor ya que se posiciona de forma relativa a un 50% desde la derecha del contenedor. Posicionamos el segundo de forma relativa por la misma cantidad (50%) en la dirección contraria, así quedará centrado.
<div class="contenedor">
<div class="outer-centrado">
<div class="inner-centrado">
</div>
</div>
<div class="clear"></div>
</div>
A este HTML se le aplica este CSS para conseguir que el div interno quede centrado:
.outer-centrado {
float: right;
right: 50%;
position: relative;
}
.inner-centrado {
float: right;
right: -50%;
position: relative;
}
.clear {
clear: both;
}
El div de clase clear puede ser necesario o no dependiendo del caso para que no se vayan otros elementos al lado del div que hemos centrado.
Utilizando tablas se puede conseguir centrar el contenido sin importar si conocemos o no su anchura y ya no tenemos que preocuparnos si el elemento a centrar es un elemento block o un elmento inline ni de las propiedades de su contenedor. No obstante, el uso de tablas para maquetar no se recomienda y las tablas se deben dejar para contenido tabulado. Así que, dependiendo del contenido del que estés tratando, te será mucho más fácil usar directamente tablas
Ejemplo: centrar un menú construido con listas (ul->li)
La mayoría de menús se construyen utilizando listas no ordenadas, con algo similar a esto:
<div class="menu_container">
<ul id="menu">
<li><a href="/pagina1.html">Página 1</a></li>
<li><a href="/pagina2.html">Página 2</a></li>
<li><a href="/pagina3.html">Página 3</a></li>
<li><a href="/pagina4.html">Página 4</a></li>
</ul>
</div>
Para centrar este menú podríamos utilizar el siguiente CSS, que toma uno de los métodos para centrar elementos block de los mencionados anteriormente:
.menu_container {
clear: both;
float: left;
overflow: hidden;
width: 100%;
}
#menu {
float: left;
left: 50%;
list-style-type: none;
margin: 0 auto;
padding: 0;
position: relative;
}
#menu li {
float: left;
position: relative;
right: 50%;
}
#menu a {
background: none repeat scroll 0 0 #000;
border: 1px solid #CCC;
color: #FFF;
display: block;
padding: 4px 10px;
text-decoration: none;
width: auto;
}
Puede haber otras muchas técnicas para centrar elementos block, como un div, cuya anchura no es fija o no ha sido declarada pero con estas puedes empezar a experimentar.
Fuentes
Creado el 12 03 2012 Actualizado el 13 03 2012
