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:<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>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>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>.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;
}
Comentarios