Vamos a aprender a centrar horizontal y verticalmente con CSS distintos tipos de contenidos en una página HTML.
Centrando texto:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Alinear horizontal y verticalmente un elemento</title> <style type="text/css"> html, body { margin: 0; padding: 0; width: 100%; height: 100%; display: table; } .contenedor { display: table-cell; text-align: center; vertical-align: middle; } .contenido { display: inline-block; max-width: 400px; text-align: left; } </style> </head> <body> <div class="contenedor"> <div class="contenido"> <h2>Esto es un título h2</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a lectus diam. Morbi pellentesque vestibulum tempus. Sed eu mauris in orci bibendum semper a sed dolor. Vivamus velit dolor, ullamcorper cursus finibus eget, varius ac nisi. Nam ut venenatis lorem, sit amet posuere sem. Nam consectetur mauris ut fringilla dapibus. Suspendisse pretium suscipit elit, eget lacinia lorem varius vitae. Donec consequat velit in lectus placerat aliquet. Aenean finibus, ipsum venenatis hendrerit ultrices, elit ex rutrum urna, sed accumsan mi velit vel lacus. Nulla in finibus est, quis rhoncus nisl. Quisque velit orci, mattis sed gravida non, blandit imperdiet est. Maecenas et semper eros, ac euismod sem. Fusce elementum, dolor quis ultricies feugiat, sem diam suscipit urna, at egestas justo risus a libero. Suspendisse faucibus ac ligula at euismod. Nullam nec odio non lacus varius auctor at vel libero. </p> <p> Nunc iaculis fermentum lacus. Morbi placerat tempus velit id porta. Mauris sem diam, sodales vel erat eget, suscipit bibendum justo. Aliquam quis lectus a velit convallis molestie ut et nunc. Aliquam maximus eros porttitor quam scelerisque, sed pretium est commodo. Ut a quam ac felis vestibulum ultricies. Mauris imperdiet dignissim eros non suscipit. Aliquam vel ante tristique, facilisis ligula in, lacinia ipsum. </p> </div> </div> </body> |
La clave está en hacer que el elemento que englobará a todos los demás (html, body) se comporte como una tabla. Para conseguirlo utilizamos la propiedad display: table;
El resto de propiedades que aplicamos tanto a html como a body sirven para quitar márgenes y espaciados. Poniendo el ancho y el alto al 100% disponemos de todo el espacio del navegador para poder centrar su contenido.
Tenemos que crear un par de divs para poder centrar horizontal y verticalmente el contenido. Creamos un div que en nuestro ejemplo lleva asignada la clase .contenedor. Este div se comporta como una celda de una tabla si le ponemos display: table-cell; . De esta manera podemos conseguir que el div que tiene dentro (contenido) esté centrado horizontal (text-align: center;) y verticalmente (vertical-align: middle;)
Finalmente creamos el div al que hemos asignado la clase .contenido. Tiene que estar dentro del div con clase .contenedor.
Al div .contenido le asignamos por css un display: inline-block;. En este caso concreto también le damos un ancho fijo para evitar que las líneas sean demasiado largas y no perder legibilidad. También para este ejemplo hemos alineado el texto a la izquierda.
Aquí tienes el ejemplo completo de texto centrado horizontal y verticalmente
* Si quisiéramos que el texto del ejemplo tuviese una alineación centrada (por ejemplo para dar el aspecto de una letra de una canción o una poesía), es tan simple como añadir cambiar en la clase .contenido la propiedad text-align: left; por text-align: center;
Centrando una imagen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Alinear horizontal y verticalmente un elemento</title> <style type="text/css"> html, body { margin: 0; padding: 0; width: 100%; height: 100%; display: table; } .contenedor { display: table-cell; text-align: center; vertical-align: middle; } .contenido { display: inline-block; } .contenido img { width: 100%; } </style> </head> <body><div class="contenedor"> <div class="contenido"> <img src="imagen-sm.jpg"> </div> </div> </body> </html> |
En realidad cambian muy pocas cosas respecto al ejemplo anterior (eso es lo bueno de utilizar este método que te propongo).
Dentro del <body> tendremos ahora una imagen (<img>) que para el ejemplo será de 450px de ancho.
Lo que cambia respecto al anterior ejemplo es que la clase .contenido sólo necesita la propiedad display: inline-block; para hacer su trabajo.
Aunque con esto ya tenemos la imagen centrada horizontal y verticalmente, he añadido una pequeña mejora. Para que la imagen se ajuste a tamaños pequeños (smartphones antiguos o de poca resolución), he añadido a la etiqueta <img> un ancho del 100%. De esta manera la imagen se ajustará al tamaño del div que la contiene.
Aquí tienes el ejemplo completo de imagen centrada horizontal y verticalmente
Centrando una imagen que se ajuste al ancho del navegador:
Para conseguir que una imagen, además de estar centrada horizontal y verticalmente, se adapte al ancho del navegador sólo tienes que añadir a la clase .contenido lo siguiente: width; 100%;
Aquí tienes el ejemplo completo de imagen centrada que se adapta al ancho del navegador
Centrando players de audio (soundcloud) y vídeo (YouTube):
Es tan fácil como buscar el botón “Insertar” o similar en cualquiera de estos servicios. Nos generará un código que copiaremos y pegaremos en el <body> de nuestra página. Aquí tienes un par de ejemplos:
Ejemplo de audio (soundcloud) centrado horizontal y verticalmente
Ejemplo de vídeo (YouTube) centrado horizontal y verticalmente
Y esto es todo. Hay otras formas de centrar contenido, pero esta es sencilla y puede serte útil en muchos casos.
* La imagen usada en los ejemplos pertenece a freepik.
Deja un comentario
Lo siento, debes estar conectado para publicar un comentario.