Qué saber
- Para centrar el texto, utilice el siguiente código ("[/]" indica un salto de línea): .center {[/] text-align: center; [/] }.
- Centrar bloques de contenido con el siguiente código ("[/]" indica un salto de línea): .center {[/] margin: auto; [/] ancho: 80em; [/] }.
- Para centrar una imagen ("[/]" denota un salto de línea): img.center {[/] display: block; [/] 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 {
alineación de texto: centro;
}
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.
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. Grande bloques de texto justificado al centro puede ser difícil de leer, así que use 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 {
margen: automático;
ancho: 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". Esto Básicamente, toma cualquier espacio 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 {
bloqueo de pantalla;
margen izquierdo: automático;
margen derecho: automático;
}
Y aquí está el HTML para centrar la imagen:
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.
Centrado de elementos verticalmente con CSS
Centrar objetos verticalmente siempre ha sido un desafío en el diseño web, pero el lanzamiento de la 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 {
alineación vertical: medio;
}
Todos los navegadores modernos apoyar 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 divy establezca una altura mínima. Declare el elemento contenedor como una celda de tabla y establezca la alineación vertical en "medio".
Por ejemplo, aquí está el CSS:
.vcenter {
altura mínima: 12em;
pantalla: celda de tabla;
alineación vertical: medio;
}
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. Utilice CSS en su lugar 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. La decisión de Microsoft en 2015 de abandonar el soporte para versiones anteriores de IE, sin embargo, hará que esto no sea un problema ya que IE deja de usarse.