Los desarrolladores web confían en los encabezados cuando desean resaltar una sección de texto importante en la página web. Los encabezados se pueden usar para cumplir diferentes objetivos; Sin embargo, el propósito principal sigue siendo el mismo, y es enfatizar un texto importante o separar una sección de otra. Por defecto, los encabezados están alineados a la izquierda; Sin embargo, para llamar la atención del visitante y hacerlo más visible, puede colocar el encabezado en el centro.

Esta guía demostrará cómo centrar H1 en CSS.

Cómo centrar H1 en CSS?

Para centrar el H1, utilizaremos las siguientes propiedades de CSS:

• Propiedad de alineación de texto
• Propiedad de visualización
• propiedad de la propiedad

Comencemos con el Método uno!

Método 1: Use la propiedad de alineación de texto al centro H1 en CSS

En CSS, el "texto alineadoLa propiedad se utiliza para establecer el texto de los elementos HTML a la izquierda, el centro o la derecha horizontalmente. En general, podemos decir que esta propiedad es muy útil para la alineación de texto.

Aquí mire el ejemplo a continuación para comprender cómo funciona la propiedad de alineación de texto.

Ejemplo

Tenemos una audiencia en la página web actualmente alineada al lado izquierdo de forma predeterminada. Vamos a poner este encabezado en el centro:

En el archivo HTML, configure el

etiqueta en la sección del cuerpo y agréguela.

Html

Mi encabezado

En el archivo CSS, utilizaremos el "texto alineado"Propiedad y establecer su valor en el"centro". Esto alineará el encabezado H1 al centro.

CSS

H1
Text-Align: Center;

Guarde el código y ábralo en el navegador:

Como puede ver, hemos centrado con éxito el H1 utilizando la propiedad CSS Text-Align.

Método 2: Use la propiedad de visualización en el centro H1 en CSS

Cuando se trata de definir el comportamiento del elemento HTML, el "mostrarSe utiliza la propiedad. Esta propiedad tiene algunos valores útiles, como Flex y Block. Además, el comportamiento flexible de los elementos es el resultado del valor flexible, y el comportamiento del bloque de los elementos es el resultado del valor de bloqueo.

Ejemplo

En primer lugar, especifique el "mostrar"Propiedad y su valor para el"doblar". Esto hará que el elemento de encabezado sea flexible. En el siguiente paso, use el "Justify-Content"Propiedad con el valor"centro"Para colocar el encabezado en el centro.

CSS

H1
Pantalla: Flex;
Justify-Content: Center;

Producción

El encabezado H1 está alineado con el centro con éxito.

Método 3: Use la propiedad de posición para centrar H1 en CSS

Este "posiciónLa propiedad se explica por sí misma; decide cómo se colocará un elemento HTML en alguna posición. La combinación de esta propiedad con otras propiedades de CSS dará como resultado el logro del objetivo deseado, que está configurando el encabezado H1 en CSS.

Ejemplo

Para centrar el H1, el "posición"La propiedad se puede utilizar con el valor"relativo". Esto reorganizará la posición normal del elemento. Ahora, usa el "izquierda"Propiedad, y establece su valor en"40%Se creará un espacio desde el lado izquierdo, y nuestro encabezado se alineará con el centro.

CSS

H1
Posición: relativo;
Izquierda: 40%;

Producción

Hemos explicado los métodos más fáciles para centrar H1 en CSS.

Conclusión

Al centro H1, el CSS "texto alineado","mostrar", o "posiciónSe pueden utilizar las propiedades. Para el propósito mencionado, la propiedad de alineación de texto se utilizará con el "centro", La propiedad de visualización se utilizará con el"doblar"Valor, y estableceremos el valor de la propiedad de la posición"relativo"Para obtener el resultado deseado. Este artículo ha cubierto cómo centrar H1 utilizando diferentes propiedades de CSS.