TechCodeview

CSS galvenokārt tiek izmantots, lai HTML tīmekļa lapai nodrošinātu vislabāko stilu. Izmantojot CSS , Mēs varam norādīt elementu izkārtojumu lapā.

Ir dažādas metodes, kā pielāgot pogu tīmekļa lapas centrā. Mēs varam izlīdzināt pogas gan horizontāli, gan vertikāli. Mēs varam centrēt pogu, izmantojot šādas metodes:

teksta līdzināšana: centrā- Iestatot vecākā div taga teksta līdzināšanas rekvizīta vērtību centrā.starpība: automašīna- iestatot maržas īpašuma vērtību uz auto.displejs: flex- iestatot displeja rekvizīta vērtību uz flex un vērtību attaisnot-saturs īpašumu uz centrs .displejs: režģis- Iestatot displeja rekvizīta vērtību režģī.

Izpratīsim iepriekš minētās metodes, izmantojot dažas ilustrācijas.

Piemērs

Šajā piemērā mēs izmantojam teksta līdzināšana īpašumu un iestatiet tā vērtību uz centrs . To var ievietot body tagā vai elementa vecāktagā div.

Šeit mēs ievietojam teksta līdzināšana: centrs; pogas elementa vecāktagā div.

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

Izvade

Piemērs

Šajā piemērā mēs izmantojam displejs: režģis; īpašums un starpība: automašīna; īpašums. Šeit mēs ievietojam displejs: režģis; pogas elementa vecāktagā div.

scan.nextstring java

Poga atrodas horizontālās un vertikālās pozīcijas centrā.

 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> 

Izvade

Piemērs

Tas ir vēl viens piemērs pogas novietošanai centrā. Šajā piemērā mēs izmantojam displejs: flex; īpašums, attaisnot-saturs: centrs; īpašums un izlīdzināt vienumus: centrs; īpašums.

Šis piemērs palīdzēs mums novietot pogu horizontālās un vertikālās pozīcijas centrā.

 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 

Izvade