Centrar con CSS3

En el anterior apartado de Propiedades Sorpresa ya vimos como centrar un texto, pero... ¿qué pasa si quiero centrar una imagen o un div?

Antes de que HTML5 llegará, existía una etiqueta que hacía muy sencilla la tarea de centrar cualquiera, cosa, esta era...

<center>

Simplemente tenías que meter dentro de la etiqueta <center> todo lo que querías centrar y listo, todo estaba centrado, pero a partir de HTML5 esta etiqueta se ha borrado a favor de usar CSS3 para centrar texto, en esta página te enseñamos como ;)

Centrar un div, section, article y aside


Cualquiera de los contenedores que aparecen arriba se pueden centrar con el siguiente código CSS

.centrar{
   margin-left: auto;
   margin-right: auto;
   display: block;
}

Margin es una propiedad que genera un margen, existe 5 formas de determinar el margen. Podemos poner margin: 5px, y que el margen sea de 5px arriba, abajo, derecha e izq, o podemos poner margin-top (margen de arriba), margin-bottom (margen de abajo), margin-right (Margen de la derecha) y margin-left (Margen de la izq). Aunque también podemos determinar el valor de cada margen en la propiedad margin, haciendo lo siguiente:

margin: 10px 20px


Esto indica que habrá 10px de margenes verticales y 20px de margenes horizontales



margin: 10px 20px 30px


Esto indica que habrá 10px de margen superior, 20px de margenes horizontales y 30px de margen inferior



margin: 10px 20px 30px 40px


Esto indica que habrá 10px de margen superior, 20px de margen derecho, 30px de margen inferior y 40px de margen izquierdo.


Siempre el contenedor ya sea div, section, article o aside debe tener la propiedad display:block para que funcione :)

Como iba diciendo, las dos etiquetas llevan la propiedad display: block; por defecto, lo que quiere decir que la caja imaginaria que contiene la palabra HTML5 (Como en el ejemplo) va a ocupar todo el espacio posible por lo que ninguna otra etiqueta se puede poner a la derecha de él. Tal vez te preguntes, y si no deberías de empezar a preguntartelo, como es que las barras de menú tipicas para navegar en algunas web suelen se horizontales. Abajo la respuesta ;)

Centrar una imagen

Para centrar una imagen se utilizan el siguiente código CSS (Esta imagen del gran Tim Beners-Lee está centrada con tal código CSS3):

Ejemplo 2

.centrar_imagen{
   display: block;
   margin:auto;
}

¿Ves que es muy fácil? Pues con esos dos estilos puedes puedes centrar casi cualquier elemento, ademas usando text-align: center, que ya lo vimos en un anterior apartado :)

Espero que te haya gustado esta página, pulsa abajo para volver y seguir aprendiendo HTML5 :).