CSS sa používa hlavne na poskytovanie najlepšieho štýlu webovej stránke HTML. Pomocou CSS môžeme určiť usporiadanie prvkov na stránke.

Existujú rôzne spôsoby zarovnania tlačidla v strede webovej stránky. Tlačidlá môžeme zarovnať horizontálne aj vertikálne. Tlačidlo môžeme vycentrovať pomocou nasledujúcich metód:

zarovnanie textu: na stred- Nastavením hodnoty vlastnosti text-align rodičovského tagu div na stred.okraj: auto- Nastavením hodnoty vlastnosti margin na auto.displej: flex- Nastavením hodnoty vlastnosti zobrazenia na flex a hodnotu of ospravedlniť-obsah majetok do stred .displej: mriežka- Nastavením hodnoty vlastnosti zobrazenia na mriežku.

Poďme pochopiť vyššie uvedené metódy pomocou niekoľkých ilustrácií.

Príklad

V tomto príklade používame zarovnanie textu vlastnosť a nastavte jej hodnotu na stred . Môže byť umiestnený v značke body alebo v rodičovskej značke div prvku.

Tu umiestnime text-align: center; v rodičovskej značke div prvku button.

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

Výkon

Príklad

V tomto príklade používame displej: mriežka; majetok, a okraj: auto; nehnuteľnosť. Tu umiestnime displej: mriežka; v rodičovskej značke div prvku button.

čo je $home linux

Tlačidlo sa umiestni do stredu horizontálnej a vertikálnej polohy.

 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> 

Výkon

Príklad

Je to ďalší príklad umiestnenia tlačidla do stredu. V tomto príklade používame displej: flex; nehnuteľnosť, zdôvodniť-obsah: stred; majetok, a align-items: center; nehnuteľnosť.

Tento príklad nám pomôže umiestniť tlačidlo do stredu horizontálnej a vertikálnej polohy.

 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 

Výkon