Cómo centrar imágenes con CSS

¿Buscas centrar una imagen usando CSS? Los problemas de alineación suelen ser una fuente de frustración para los diseñadores web. Afortunadamente, centrar una imagen con CSS es realmente simple y le mostraremos cómo hacerlo en unos pocos pasos.

Al igual que con muchas tareas de diseño web, ¡hay más de una forma de hacerlo! Cubriremos tres métodos principales en este artículo. ¡Empecemos!

1. Utilice la propiedad de margen

Configuración de la margen La propiedad es una de las formas más fáciles de centrar horizontalmente una imagen usando CSS. Los márgenes son un componente central de el modelo de caja CSS.

Primero, deberá transformar el elemento de imagen de uno en línea a uno de bloque. Los elementos HTML a nivel de bloque ocupan todo el ancho de su elemento principal y pueden ocupar todo el ancho de una página.

Al convertir un elemento de imagen en un elemento de bloque, puede manipular su posición ajustando sus márgenes horizontales. También deberá establecer un ancho específico para la imagen, para determinar cuánto espacio ocupa la imagen en la página.

Independientemente del ancho que elija, la imagen deberá tener los mismos márgenes izquierdo y derecho. Puede lograr esto fácilmente dando a la propiedad de margen un valor de auto:

img.centro {
 bloqueo de pantalla;
 margen izquierdo: automático;
 margen derecho: automático;
 ancho: 800px;
}

2. Utilice el diseño Flexbox

Este método requiere colocar la imagen en un elemento a nivel de bloque, generalmente un división:

Una vez que haya hecho esto, puede agregar algunas propiedades para manipular su apariencia. Usarás dos propiedades CSS.

El primero es el mostrar propiedad con su valor establecido en doblar. Tú también puedes usa flex para alinear elementos en HTML. La segunda propiedad que agregará a su div es justificar-contenido, con su valor establecido en centro al igual que:

centro.div {
 pantalla: flexible;
 justificar-contenido: centro;
}

3. Usar el elemento central en desuso

Las mejores prácticas web lo alientan a usar CSS para el estilo y HTML para la semántica, por lo que no debe usar este método HTML. Él centro La etiqueta, que centra su contenido horizontalmente, está obsoleta en HTML5.

Pero si es necesario, aquí le mostramos cómo centrar una imagen usando solo HTML. Simplemente envuelva el imagen etiqueta en una etiqueta central así:

Así es como alinear sus imágenes en HTML

Le mostramos tres métodos diferentes y fáciles de usar para centrar sus imágenes en un documento HTML. Pruébalos todos y elige el que mejor te funcione. ¡Evita el tercer método a menos que no tengas absolutamente ninguna opción!

Una cosa a tener en cuenta es que hay bastantes formas más de centrar imágenes usando HTML y CSS. Un método común que funciona tanto para texto como para imágenes en línea es el texto alineado propiedad.

Cómo centrar la alineación del texto en su página web con CSS

Leer siguiente

Sobre el Autor