Saltar al contenido

Cómo utilizar CSS para centrar imágenes y otros objetos HTML

abril 20, 2021

Qué saber

  • Para centrar el texto, utilice el siguiente código (“[/]”denota un salto de línea): .center { [/] alineación de texto: centro; [/] }.
  • Centrar bloques de contenido con el siguiente código (“[/]”denota un salto de línea): .center { [/] margen: automático; [/] ancho: 80em; [/] }.
  • Para centrar una imagen (“[/]”denota un salto de línea): img.center { [/] bloqueo de pantalla; [/] margen izquierdo: automático; [/] margen derecho: automático; [/] }.

CSS es la mejor manera de centrar elementos, pero puede ser un desafío para los diseñadores web principiantes porque hay muchas formas de lograrlo. Este artículo explica cómo usar CSS para centrar texto, bloques de texto e imágenes.



Centrado de texto con CSS

Solo necesita conocer una propiedad de estilo para centrar el texto en una página:


.center {
text-align: center;
}


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


A continuación, se muestra un ejemplo de esta clase aplicada en el documento HTML:



Este texto está centrado.


Al centrar texto con la propiedad text-align, recuerde que estará centrado dentro de su elemento contenedor y no necesariamente centrado dentro de la página completa.


La legibilidad siempre es clave cuando se trata del texto de un sitio web. Los bloques grandes de texto justificado en el centro pueden resultar difíciles de leer, por lo que debe utilizar este estilo con moderación. Los titulares y pequeños bloques de texto, como el texto teaser de un artículo, suelen ser fáciles de leer cuando están centrados; sin embargo, sería difícil consumir bloques de texto más grandes, como un artículo completo, si estuvieran completamente justificados en el centro.


Centrado de bloques de contenido con CSS

Los bloques de contenido se crean utilizando HTML


.center {
margin: auto;
width: 80em;
}


Esta abreviatura CSS para la propiedad margin establecería los márgenes superior e inferior en un valor de 0, mientras que el izquierdo y el derecho usarían “auto”. Básicamente, esto 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:



Todo este bloque está centrado,

pero el texto en su interior está alineado a la izquierda.


Siempre que su bloque tenga un ancho definido, se centrará dentro del elemento contenedor. El texto contenido en ese bloque no estará centrado dentro de él, sino que estará justificado a la izquierda. Esto se debe a que el texto está justificado a la izquierda como predeterminado en los navegadores web. Si desea que el texto también se centre, puede usar la propiedad de alineación de texto descrita 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 con la misma propiedad de alineación de texto, el W3C no lo recomienda. Por lo tanto, siempre existe la posibilidad de que las versiones futuras de los navegadores opten por ignorar este método.


En lugar de usar alineación de texto para centrar una imagen, debe decirle al navegador explícitamente que la imagen es un elemento a nivel de bloque. De esta manera, puede centrarlo como lo haría con cualquier otro bloque. Aquí está el CSS para que esto suceda:


img.center {
display: block;
margin-left: auto;
margin-right: auto;
}

class = “ql-syntax”>

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



class = “ql-syntax”>

También puede centrar objetos usando CSS en línea (ver más abajo), pero este enfoque no se recomienda porque agrega estilos visuales a su marcado HTML. Recuerde, el estilo y la estructura deben estar separados; agregar estilos CSS a HTML romperá esa separación y, como tal, debe evitarlo siempre que sea posible.



class = “ql-syntax ql-align-center”>

Centrado de elementos verticalmente con CSS

Centrar objetos verticalmente siempre ha sido un desafío en el diseño web, pero el lanzamiento del módulo de diseño de caja flexible CSS en CSS3 proporciona una forma de hacerlo.


La alineación vertical funciona de manera similar a la alineación horizontal descrita anteriormente. La propiedad CSS es de alineación vertical, así:


.vcenter {
vertical-align: middle;
}


Todos los navegadores modernos admiten este estilo CSS. Si tiene problemas con los navegadores más antiguos, el W3C recomienda que centre el texto verticalmente en un contenedor. Para hacerlo, coloque los elementos dentro de un elemento contenedor, como un div, y establezca una altura mínima en él. Declare el elemento contenedor como una celda de tabla y establezca la alineación vertical en “medio”.


Por ejemplo, aquí está el CSS:


.vcenter {
min-height: 12em;
display: table-cell;
vertical-align: middle;
}


Y aquí está el HTML:



Este texto está centrado verticalmente en el cuadro.

No utilice el elemento HTML para centrar imágenes y texto; ha quedado obsoleto y los navegadores web modernos ya no lo admiten. Esto, en gran parte, es una respuesta a la clara separación de estructura y estilo de HTML5: HTML crea estructura y CSS dicta el estilo. Debido a que el centrado es una característica visual de un elemento (cómo se ve en lugar de qué es), ese estilo se maneja con CSS, no con HTML. En su lugar, utilice CSS para que sus páginas se muestren correctamente y se ajusten a los estándares modernos.


Centrado vertical y versiones anteriores de Internet Explorer

Puede forzar a Internet Explorer (IE) a centrarse y luego usar comentarios condicionales para que solo IE vea los estilos, pero son un poco detallados y poco atractivos. Sin embargo, la decisión de Microsoft en 2015 de eliminar el soporte para versiones anteriores de IE hará que esto no sea un problema, ya que IE deja de usarse.