CSS se používá hlavně pro poskytování nejlepšího stylu HTML webové stránce. Pomocí CSS můžeme určit uspořádání prvků na stránce.

Existují různé způsoby zarovnání tlačítka na střed webové stránky. Tlačítka můžeme zarovnat horizontálně i vertikálně. Tlačítko můžeme vycentrovat pomocí následujících metod:

zarovnání textu: na střed- Nastavením hodnoty vlastnosti text-align rodičovského tagu div na střed.okraj: auto- Nastavením hodnoty vlastnosti margin na auto.displej: flex- Nastavením hodnoty vlastnosti display na flex a hodnotu of ospravedlnit-obsah majetek do centrum .displej: mřížka- Nastavením hodnoty vlastnosti zobrazení na mřížku.

Pojďme pochopit výše uvedené metody pomocí několika ilustrací.

Příklad

V tomto příkladu používáme zarovnání textu vlastnost a nastavte její hodnotu na centrum . Může být umístěn buď ve značce body, nebo v nadřazené značce div prvku.

Zde umístíme text-align: center; v rodičovské značce 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ýstup

Příklad

V tomto příkladu používáme displej: mřížka; majetek, a marže: auto; vlastnictví. Zde umístíme displej: mřížka; v rodičovské značce div prvku button.

jak číst soubor csv v jazyce Java

Tlačítko se umístí do středu vodorovné a svislé 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ýstup

Příklad

Je to další příklad umístění tlačítka uprostřed. V tomto příkladu používáme displej: flex; vlastnictví, justify-content: center; majetek, a align-items: center; vlastnictví.

Tento příklad nám pomůže umístit tlačítko do středu vodorovné a svislé 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ýstup