Los elementos <div> son elementos tipo block, y como cualquier otro elemento tipo block se puede centrar horizontalmente si se conoce su anchura con tan sólo aplicar un margen «auto» a izquierda y derecha. Por ejemplo:
Se pueden utilizar varios métodos, pero antes déjame hacer un recordatorio: cuándo a un elemento block, como es el div, o aquellos con la propiedad CSS display:block, no se le especifica una anchura, su anchura será determinada por la anchura de su contenedor. Esta regla no se cumple 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. Sabiendo esto, podemos centrar un div sin anchura fija o no definida con las siguientes técnicas:
Si al div le aplicamos la propiedad CSS 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-alignde su contenedor:div a centrar dentro de otro, ambos con posición relativa
Si ponemos dos div uno dentro de otro y al exterior aplicamos float:right y right:50%, y al interior aplicamos float:lefty right:-50%, ambos dentro de un div contenedor, el div más interno quedará centrado. 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.
Con el luso de 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 elemento inline ni de las propiedades de su contenedor. No obstante, el uso de tablas para maquetar no se recomienda, sólo se deben utilizar 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:
<style type="text/css">
body {
width: 100%;
}
.inner {
width: 300px;
margin: 0 auto;
}
</style>
<body>
<div class="inner">
<p>Algo de texto</p>
</div>
</body>
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 300 píxeles y, en caso de que la anchura del body sea mayor a 300px, este div quedaría centrado horizontalmente. Pero, ¿cómo podemos centrar un div si no tiene una anchura fija?. El margen auto no funcionará.Diferentes alternativas
Se pueden utilizar varios métodos, pero antes déjame hacer un recordatorio: cuándo a un elemento block, como es el div, o aquellos con la propiedad CSS display:block, no se le especifica una anchura, su anchura será determinada por la anchura de su contenedor. Esta regla no se cumple 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. Sabiendo esto, podemos centrar un div sin anchura fija o no definida con las siguientes técnicas:
Aplicar la propiedad inline-block
Si al div le aplicamos la propiedad CSS 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-alignde su contenedor:
<style type="text/css">
.contenedor {
text-align: center;
}
.centrado {
display: inline-block;
}
</style>
<div class="contenedor">
<div class="centrado">
</div>
</div>
div a centrar dentro de otro, ambos con posición relativa
Si ponemos dos div uno dentro de otro y al exterior aplicamos float:right y right:50%, y al interior aplicamos float:lefty right:-50%, ambos dentro de un div contenedor, el div más interno quedará centrado. 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.
<style>
.outer-centrado {
float: right;
right: 50%;
position: relative;
}
.inner-centrado {
float: right;
right: -50%;
position: relative;
}
.clear {
clear: both;
}
</style>
<div class="contenedor">
<div class="outer-centrado">
<div class="inner-centrado">
</div>
</div>
<div class="clear"></div>
</div>
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
Con el luso de 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 elemento inline ni de las propiedades de su contenedor. No obstante, el uso de tablas para maquetar no se recomienda, sólo se deben utilizar 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:
<nav class="menu_container" role="navigation">
<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>
</nav>
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 sin anchura definida pero con estas puedes empezar a experimentar.
Comentarios