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:
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 meProva-ho ara
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>Prova-ho ara
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 meProva-ho ara
Sortida