CSS s'utilitza principalment per proporcionar el millor estil a la pàgina web HTML. Mitjançant CSS, podem especificar la disposició dels elements a la pàgina.

Hi ha diversos mètodes per alinear el botó al centre de la pàgina web. Podem alinear els botons tant horitzontalment com verticalment. Podem centrar el botó utilitzant els mètodes següents:

text-align: centre- En establir el valor de la propietat text-align de l'etiqueta div pare al centre.marge: automàtic- En establir el valor de la propietat del marge a automàtic.pantalla: flex- En establir el valor de la propietat de visualització a flex i el valor de justificar-contingut propietat a centre .pantalla: quadrícula- Definint el valor de la propietat de visualització a la graella.

Entendrem els mètodes anteriors utilitzant algunes il·lustracions.

Exemple

En aquest exemple, estem utilitzant el alineació de text propietat i estableix el seu valor a centre . Es pot col·locar en una etiqueta body o a l'etiqueta div pare de l'element.

Aquí, col·loquem el alineació de text: centre; a l'etiqueta div principal de l'element botó.

 Center align button .container{ text-align: center; border: 7px solid red; width: 300px; height: 200px; padding-top: 100px; } #btn{ font-size: 25px; } Click me 

Sortida

Exemple

En aquest exemple, estem utilitzant el visualització: quadrícula; propietat, i marge: cotxe; propietat. Aquí, col·loquem el visualització: quadrícula; a l'etiqueta div principal de l'element botó.

àlgebra de conjunts

El botó es col·locarà al centre de les posicions horitzontal i vertical.

 Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: grid; } button { background-color: lightblue; color: black; font-size: 25px; margin: auto; } p{ font-size: 25px; } Click me <p>In this example we are using the <b> display: grid; </b> and <b> margin: auto;</b> properties</p> 

Sortida

Exemple

És un altre exemple de col·locació del botó al centre. En aquest exemple, estem utilitzant el pantalla: flex; propietat, justificar-contingut: centre; propietat, i elements d'alineació: centre; propietat.

Aquest exemple ens ajudarà a col·locar el botó al centre de les posicions horitzontal i vertical.

 Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: flex; justify-content: center; align-items: center; } button { background-color: lightblue; color: black; font-size: 25px; } Click me 

Sortida