CSS daugiausia naudojamas siekiant suteikti geriausią HTML tinklalapio stilių. Naudodami CSS , galime nurodyti elementų išdėstymą puslapyje.
Yra įvairių būdų, kaip išlygiuoti mygtuką tinklalapio centre. Mygtukus galime lygiuoti tiek horizontaliai, tiek vertikaliai. Mygtuką galime centruoti naudodami šiuos metodus:
Supraskime aukščiau pateiktus metodus naudodami keletą iliustracijų.
Pavyzdys
Šiame pavyzdyje mes naudojame teksto lygiavimas turtą ir nustatykite jo vertę į centras . Jis gali būti dedamas į pagrindinę elemento žymą „body“ arba į pirminę „div“ žymą.
Čia pateikiame teksto lygiavimas: centre; mygtuko elemento pirminėje div žymoje.
Center align button .container{ text-align: center; border: 7px solid red; width: 300px; height: 200px; padding-top: 100px; } #btn{ font-size: 25px; } Click me Išbandykite dabar Išvestis
Pavyzdys
Šiame pavyzdyje mes naudojame ekranas: tinklelis; turtas ir marža: automobilis; nuosavybė. Čia pateikiame ekranas: tinklelis; mygtuko elemento pirminėje div žymoje.
css lygiuojančius vaizdus
Mygtukas bus horizontalios ir vertikalios padėties centre.
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> Išbandykite dabar Išvestis
Pavyzdys
Tai dar vienas mygtuko įdėjimo centre pavyzdys. Šiame pavyzdyje mes naudojame ekranas: lankstus; nuosavybė, pateisinti-turinys: centras; turtas ir sulyginti elementus: centre; nuosavybė.
Šis pavyzdys padės mums padėti mygtuką horizontalios ir vertikalios padėties centre.
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 Išbandykite dabar Išvestis
