Cómo centrar una imagen con alineación de texto: centro

Programación

Un elemento es un elemento en línea (valor de visualización de inline-block). Se puede centrar fácilmente agregando la text-align: center;propiedad CSS al elemento principal que lo contiene.

Para centrar una imagen usando text-align: center;, debe colocar el interior de un elemento a nivel de bloque como un div. Dado que la text-alignpropiedad solo se aplica a elementos a nivel de bloque, se coloca text-align: center;en el elemento de envoltura a nivel de bloque para lograr un centrado horizontalmente .

Ejemplo

   Center an Image using text align center  .img-container { text-align: center; }

Nota: El elemento padre debe ser un elemento de bloque. Si no es un elemento de bloque, debe agregar ladisplay: block;propiedad CSS junto con latext-alignpropiedad.

   Center an Image using text align center  .img-container { text-align: center; display: block; }

Demostración: Codepen

Ajuste de objeto

Una vez que su imagen esté centrada, es posible que desee cambiar su tamaño. La object-fitpropiedad especifica cómo responde un elemento al ancho / alto de su caja principal.

Esta propiedad se puede utilizar para imágenes, videos o cualquier otro medio. También se puede usar con la object-positionpropiedad para tener más control sobre cómo se muestran los medios.

Básicamente usamos la object-fitpropiedad para definir cómo estira o aplasta un medio en línea.

Sintaxis

.element

Valores

  • fill: Este es el valor predeterminado . Cambie el tamaño del contenido para que coincida con su cuadro principal independientemente de la relación de aspecto.
  • contain: Cambie el tamaño del contenido para llenar su cuadro principal usando la relación de aspecto correcta.
  • cover: similar containpero a menudo recortando el contenido.
  • none: muestra la imagen en su tamaño original.
  • scale-down: compare la diferencia entre noney containpara encontrar el tamaño de objeto de hormigón más pequeño.

Compatibilidad del navegador

El object-fites apoyada por la mayoría de los navegadores modernos, para la información más actualizada acerca de la compatibilidad se puede comprobar esto //caniuse.com/#search=object-fit.

Documentación

  • alineación de texto - MDN
  • ajuste de objeto - MDN
  • - MDN