Centrar imágenes y objetos HTML en sitios web con CSS


Si está aprendiendo a construir sitios web, uno de los trucos más comunes que necesitará dominar es cómo centrar los elementos en la ventana del navegador. Esto podría significar centrar una imagen en la página, o podría ser un texto que justifique el centro como titulares como parte del diseño.

La manera correcta de lograr este aspecto visual de imágenes o texto centrado o incluso de toda su página web es utilizando Hojas de Estilo en Cascada (CSS). La mayoría de las propiedades para el centrado han estado en CSS desde la versión 1.0, y funcionan muy bien con CSS3 y los navegadores web modernos.

Como muchos aspectos del diseño web, hay múltiples maneras de usar CSS para centrar elementos en una página web. Echemos un vistazo a algunas formas diferentes de usar CSS para lograr este aspecto visual.

Uso de CSS para centrar elementos en HTML

Centrarse con CSS puede ser un reto para los diseñadores web principiantes porque hay muchas maneras diferentes de lograr este estilo visual. Mientras que la variedad de métodos puede ser agradable o experimentados desarrolladores web que saben que no todas las técnicas funcionan en todos los elementos, esto puede ser terriblemente desafiante para los nuevos profesionales de la web, ya que la amplia variedad de métodos significa que necesitan saber cuándo utilizar cada enfoque. Lo mejor que se puede hacer es comprender algunos enfoques. A medida que comience a utilizarlos, aprenderá qué método funciona mejor en cada caso.

A un nivel alto, puede utilizar CSS para:

  • Centrar texto
  • Centrar un elemento a nivel de bloque (como una división)
  • Centrar una imagen
  • Centrar verticalmente un bloque o una imagen

Hace muchos (muchos) años, los diseñadores web podían utilizar el elemento para centrar imágenes y texto, pero ese elemento HTML ahora está obsoleto y ya no es compatible con los navegadores web modernos. Esto significa que debe evitar el uso de este elemento HTML si desea que sus páginas se muestren correctamente y cumplan con los estándares modernos. La razón por la que este elemento fue desaprobado es, en gran parte, porque los sitios web modernos deben tener una clara separación de estructura y estilo. HTML se utiliza para crear la estructura mientras que CSS dicta el estilo. Debido a que el centrado es una característica visual de un elemento (cómo se ve más que qué es), ese estilo se maneja con CSS, no con HTML. Esta es la razón por la que añadir una etiqueta a la estructura HTML es incorrecto según los estándares web modernos. En su lugar, recurriremos a CSS para conseguir que nuestros elementos estén bien centrados.

Centrado de texto con CSS

Lo más fácil de centrar en una página web es el texto. Sólo hay un estilo de propiedad que usted necesita saber para hacer esto:

alineación de texto 
. Tomemos el estilo CSS de abajo, por ejemplo:p.center { text-align: center; }

Con esta línea de CSS, cada párrafo escrito con la clase center se centraría horizontalmente dentro de su elemento padre. Por ejemplo, si el párrafo estaba dentro de una división, lo que significa que era un hijo de esa división, estaría centrado horizontalmente dentro de la .

He aquí un ejemplo de esta clase aplicada en el documento HTML:

Al centrar el texto con la propiedad text-align, recuerde que estará centrado dentro del elemento que lo contiene y no necesariamente dentro de la página completa. Además, recuerde que el texto justificado por el centro puede ser difícil de leer para bloques grandes de contenido, así que use este estilo con moderación. Los titulares y los pequeños bloques de texto, como el texto para un u otro contenido, son a menudo fáciles de leer y están bien centrados, pero los bloques de texto más grandes, como el texto completo en sí mismo, serían difíciles de consumir si el contenido estuviera totalmente justificado en el centro. Recuerde, la legibilidad es siempre clave cuando se trata del texto del sitio web!

Centrado de bloques de contenido con CSS

Los bloques son cualquier elemento de la página que tiene un ancho definido y se establecen como un elemento de nivel de bloque. A menudo, estos bloques se crean utilizando el elemento HTML . La forma más común de centrar bloques con CSS es establecer los márgenes izquierdo y derecho a

automático
. Aquí está el CSS para la división que tiene un atributo de clase "center" aplicado a ella: div.center {
.margen: 0 auto;
ancho: 80em;
}

Esta abreviatura de CSS para la propiedad margin establecería los márgenes superior e inferior a un valor de 0, mientras que la izquierda y la derecha usarían "auto". Esto esencialmente toma cualquier espacio que esté disponible y lo divide uniformemente entre los dos lados de la ventana de visualización, centrando efectivamente el elemento en la página.

Aquí se aplica en el HTML:

>.pero el texto dentro está alineado a la izquierda;

Mientras su bloque tenga un ancho definido, se centrará dentro del elemento que lo contiene. El texto contenido en ese bloque no estará centrado en él, sino que estará justificado a la izquierda. Esto se debe a que el texto está justificado a la izquierda en el valor predeterminado en los navegadores web. Si usted quisiera que el texto se centrara también, podría usar la propiedad text-align que cubrimos anteriormente junto con este método para centrar la división.

Centrado de imágenes con CSS

Aunque la mayoría de los navegadores mostrarán imágenes centradas usando la misma propiedad de alineación de texto que ya vimos para el párrafo, no es una buena idea confiar en esa técnica ya que no es recomendada por el W3C. Dado que no es recomendable, siempre existe la posibilidad de que versiones futuras de los navegadores puedan optar por ignorar este método.

En lugar de utilizar la alineación de texto para centrar una imagen, debe indicar explícitamente al navegador que la imagen es un elemento de nivel de bloque. De esta forma, se puede centrar como en cualquier otro bloque. Aquí está el CSS para hacer que esto suceda:

img.center {
>img.centervisualización: bloque;
> bloquemargin-left: auto;
margin-right: auto;
}

Y aquí está el HTML que para la imagen que queremos centrar:

También puede centrar objetos usando CSS en línea (ver abajo), pero este enfoque NO es recomendable ya que añade estilos visuales a su marcado HTML. Recuerde, queremos separar estilo y estructura, por lo que añadir estilos CSS a su código HTML romperá esa separación y, como tal, debería evitarse siempre que sea posible.

Centrando Elementos Verticalmente Con CSS

Centrar objetos verticalmente siempre ha sido un reto en el diseño web, pero con el lanzamiento del módulo CSS Flexible Box Layout Module en CSS3, ahora hay una forma de hacerlo.

La alineación vertical funciona de manera similar a la alineación horizontal cubierta anteriormente. La propiedad CSS es

alineación vertical

con el

mediano 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>ivalor..vcenter {
vertical-alineado: medio;
}

La desventaja de este enfoque es que no todos los navegadores soportan CSS FlexBox, aunque cada vez son más los que utilizan este nuevo método de diseño CSS. De hecho, todos los navegadores modernos de hoy en día soportan este estilo CSS. Esto significa que su única preocupación con Flexbox sería una versión mucho más antigua del navegador.

Si tiene problemas con navegadores antiguos, el W3C recomienda que centre el texto verticalmente en un contenedor utilizando el siguiente método:

  1. Coloque los elementos a centrar dentro de un elemento de contención, como por ejemplo un div.
  2. Fije una altura mínima en el elemento que lo contiene.
  3. Declarar que contiene un elemento como una celda de tabla.
  4. Ponga la alineación vertical en "medio".

Por ejemplo, aquí está el CSS:

.vcenter {
min-height: 12em;
display: table-cell;
vertical-alineado: medio;
}

Y aquí está el HTML:

Este texto está centrado verticalmente en la caja.  

Centrado vertical y versiones anteriores de Internet Explorer

Hay algunas maneras de forzar a Internet Explorer (IE) a centrar y luego usar comentarios condicionales para que sólo IE vea los estilos, pero son un poco verbosos y feos. La buena noticia es que con la reciente decisión de Microsoft de eliminar el soporte para versiones anteriores de IE, esos navegadores que no son compatibles deberían estar a punto de salir, facilitando a los diseñadores web el uso de métodos modernos de diseño como CSS FlexBox, que hará que todo el diseño CSS, y no sólo el centrado, sea más fácil para todos los diseñadores web.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *