CSS este folosit în principal pentru a oferi cel mai bun stil paginii web HTML. Folosind CSS, putem specifica aranjarea elementelor pe pagină.

Există diferite metode de aliniere a butonului în centrul paginii web. Putem alinia butoanele atât pe orizontală, cât și pe verticală. Putem centra butonul folosind următoarele metode:

text-align: centru- Prin setarea proprietății text-align a etichetei div părinte în centru.margine: auto- Prin setarea valorii proprietății marginii la auto.display: flex- Prin setarea valorii proprietății de afișare la flex și valoarea lui justifica-conținut proprietate la centru .afișaj: grilă- Prin setarea valorii proprietății de afișare la grilă.

Să înțelegem metodele de mai sus folosind câteva ilustrații.

Exemplu

În acest exemplu, folosim aliniere text proprietate și setați valoarea acesteia la centru . Poate fi plasat fie într-o etichetă body, fie în eticheta div părinte a elementului.

Aici, plasăm text-align: centru; în eticheta div părinte a elementului buton.

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

Ieșire

Exemplu

În acest exemplu, folosim afisare: grila; proprietate, și marginea: masina; proprietate. Aici, plasăm afisare: grila; în eticheta div părinte a elementului buton.

versiunea java linux

Butonul se va plasa în centrul pozițiilor orizontale și verticale.

 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> 

Ieșire

Exemplu

Este un alt exemplu de plasare a butonului în centru. În acest exemplu, folosim display: flex; proprietate, justificare-conținut: centru; proprietate, și alinierea elementelor: centru; proprietate.

Acest exemplu ne va ajuta să plasăm butonul în centrul pozițiilor orizontale și verticale.

 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 

Ieșire