¿Sabes cómo centrar una imagen, un div o un texto en CSS?
Aprende a centrar cualquier elemento ya sea horizontal o verticalmente. Te explico 3 técnicas que siempre funcionan.
___
❇️Web oficial: contenido extra, tienda y más
webpunk.dev
___
✊ ¡Suscríbete al canal!
ru-vid.com?sub_co...
___
🤘😬 ¡Sígueme en redes!
Instagram: / webpunk.dev
Facebook: / webpunk.dev
Twitter: / webpunkdev
Twitch: / webpunkdev
___
Alinear las líneas de texto de los párrafos o centrar elementos img son tareas muy comunes a las que nos enfrentamos los desarrolladores.
Para cambiar el estilo de estos elementos HTML vamos a utilizar 3 técnicas de CSS.
Podemos diferenciar entre tres casos distintos:
1. Centrar horizontalmente líneas de texto
El caso más típico y más fácil de implementar es el de querer centrar una o varias líneas de texto, ya sea en un párrafo (etiqueta p), una etiqueta (etiqueta span) o en un encabezado (etiquetas h1, h2, h3…).
Utilizaremos la propiedad “text-align” de CSS que está pensada para eso.
Las líneas de este párrafo están todas centradas entre los márgenes del párrafo, gracias al valor “center” de la propiedad “text-align”.
Este método sirve también para alinear cualquier otro elemento que esté dentro del párrafo, siempre y cuando se muestre como un “bloque en línea”, como una imagen o un span.
2. Centrar horizontalmente un bloque de texto o una imagen
Centrar horizontalmente un bloque de texto o una imagen
Para centrar horizontalmente cualquier otro elemento de tipo “bloque” como puede ser un elemento div, basta con poner los márgenes laterales en modo automático:
div {
margin-left: auto;
margin-right: auto;
}
Si queremos centrar una imagen debemos especificar que la muestre como un bloque ya que las imágenes, por defecto, tienen un display: inline-block implícito. Esto lo podemos hacer utilizando el atributo “display” con el valor “block”:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
3. Centrar verticalmente un bloque o una imagen
Para centrar verticalmente un elemento debemos tomar una aproximación distinta. En este caso debemos aplicar un par de propiedades CSS al contenedor que contiene los elementos que queremos centrar:
#contenedor {
display: table-cell;
vertical-align: middle;
}
___
Música bajo licencia Creative Commons
🎵 Canción de la intro
"Belfast-Belfast" de Shigeto Noguchi
/ belfast-belfast
🎵 Canción de fondo
"A grand love theme" de KID LOCO
• Video
🎵 Canción del final
"Windows" de Cotton Ships
/ windows
16 авг 2017
