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:
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 Vyskúšajte to 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> Vyskúšajte to 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 Vyskúšajte to Výkon
