Consejos útiles

Tres formas de centrar la imagen html

Pin
Send
Share
Send
Send


Usar CSS es la forma más óptima de centrar imágenes, bloques de texto e incluso el diseño completo de la página web. La mayoría de las propiedades para alinear HTML han estado disponibles en CSS desde la versión 1.0. Funcionan muy bien con CSS3 y los navegadores web modernos:

Aplicaciones de centrado CSS en HTML

El centrado de CSS puede ser un problema para los diseñadores web novatos. Hay muchas formas de hacer esto, pero no todas se aplican a cada elemento.

CSS se puede usar para:

  • Centra el texto
  • Centrar un elemento de bloque (por ejemplo, div)
  • Imagen central
  • Centre el bloque o la imagen verticalmente.

Hace muchos años, los diseñadores web podían usar para centrar imágenes y texto. Pero ahora esta etiqueta está en desuso y ya no es compatible con los navegadores modernos. Esto se debe al hecho de que los sitios modernos deberían tener una clara separación de estructura y estilos.

Centrado de texto CSS

La forma más fácil de centrar el texto en una página web. Para hacer esto, solo necesita una propiedad: alinear texto HTML:

Con esta línea de código, cada párrafo con la clase central se centrará horizontalmente dentro de su elemento padre.

Aplicaciones de esta clase:

Al alinear texto en el centro utilizando la propiedad de alineación de texto, recuerde que estará centrado dentro del contenedor que lo contiene, y no necesariamente con respecto a toda la página.

Centrar bloques de contenido usando CSS

Los bloques son todos los elementos de una página que se establecen como elementos de nivel de bloque y tienen un cierto ancho. A menudo, tales bloques se crean usando

La forma más común de centrar bloques es establecer el relleno izquierdo y derecho en automático:

Esta forma abreviada de la propiedad de margen establecerá los márgenes superior e inferior en 0, y los márgenes izquierdo y derecho utilizarán automático. Por lo tanto, todo el espacio disponible está ocupado y dividido equitativamente entre los dos lados, lo que equivale a la alineación div HTML.

Aplicación HTML:

Como el bloque tiene un cierto ancho, estará centrado dentro del elemento que lo contiene. El texto en este bloque no se alineará al centro, sino a la izquierda. Como por defecto en los navegadores, el texto se deja alineado. Para mantener el texto centrado, use la propiedad text-align, que describimos anteriormente.

Centrado de imagen CSS

La mayoría de los navegadores mostrarán imágenes centradas al usar la propiedad de alineación de texto HTML. Pero no debe confiar en este método, ya que W3C no lo recomienda.

En cambio, debe decirle explícitamente a su navegador que la imagen es un elemento de nivel de bloque. Aquí está el código CSS para esto:

Aquí está el código HTML para que la imagen se centre:

También puede centrar objetos usando CSS en línea:

Centrar elementos verticalmente con CSS

La alineación vertical HTML siempre ha sido problemática en el diseño web, pero con el lanzamiento de la especificación del Módulo de diseño de caja flexible CSS en CSS3, ha surgido una solución para esta tarea.

La alineación vertical funciona igual que la alineación horizontal descrita anteriormente. La propiedad de alineación vertical con un valor de middle:

La desventaja de este enfoque es que no todos los navegadores admiten CSS FlexBox. Si hay problemas con versiones anteriores de los navegadores, W3C recomienda centrar el texto verticalmente en el contenedor utilizando el siguiente método:

  • Coloque los elementos a centrar dentro de un elemento contenedor como un div,
  • Establezca la altura mínima para el elemento contenedor,
  • Declarar un elemento contenedor,
  • Establezca la alineación vertical HTML en el medio.

Centrado vertical y versiones anteriores de Internet Explorer

Hay varias formas de obligar a IE a centrar objetos y luego usar comentarios condicionales. La buena noticia es que, debido a la reciente decisión de Microsoft de abandonar el soporte para versiones anteriores de IE, estos navegadores deberían desaparecer pronto, lo que facilitaría a los diseñadores web el uso de enfoques de marcado modernos como CSS FlexBox.

Esta publicación es una traducción del artículo "Usar CSS para centrar imágenes y otros objetos HTML" preparado por el equipo amigable del proyecto Internet Technology.ru

Mira el video: Tutorial Como Centrar Vertical y Horizontalmente con CSS (Enero 2022).

Pin
Send
Share
Send
Send