CSS esas olarak HTML web sayfasına en iyi stili sağlamak için kullanılır. CSS kullanarak sayfadaki öğelerin düzenini belirleyebiliriz.

Düğmeyi web sayfasının ortasına hizalamanın çeşitli yöntemleri vardır. Düğmeleri hem yatay hem de dikey olarak hizalayabiliriz. Aşağıdaki yöntemleri kullanarak düğmeyi ortalayabiliriz:

metin hizalama: ortala- Ana div etiketinin text-align özelliğinin değerini merkeze ayarlayarak.kenar boşluğu: otomatik- Marj özelliğinin değerini otomatik olarak ayarlayarak.ekran: esnek- display özelliğinin değerini flex olarak ve değerini ayarlayarak haklı içerik mülkiyet merkez .ekran: ızgara- Izgaraya görüntüleme özelliğinin değerini ayarlayarak.

Yukarıdaki yöntemleri bazı çizimler kullanarak anlayalım.

Örnek

Bu örnekte, şunu kullanıyoruz: Metin hizalama özelliği ve değerini şu şekilde ayarlayın: merkez . Bir gövde etiketine veya öğenin ana div etiketine yerleştirilebilir.

Buraya yerleştiriyoruz metin hizalama: ortala; düğme öğesinin ana div etiketinde.

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

Çıktı

Örnek

Bu örnekte, şunu kullanıyoruz: ekran: ızgara; mülkiyet ve kenar boşluğu: araba; mülk. Buraya yerleştiriyoruz ekran: ızgara; düğme öğesinin ana div etiketinde.

java sınırlayıcı

Düğme yatay ve dikey konumların ortasına yerleştirilecektir.

 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> 

Çıktı

Örnek

Düğmenin ortaya yerleştirilmesinin başka bir örneğidir. Bu örnekte, şunu kullanıyoruz: ekran: esnek; mülk, yasla-içerik: merkez; mülkiyet ve hizalama öğeleri: merkez; mülk.

Bu örnek, düğmeyi yatay ve dikey konumların ortasına yerleştirmemize yardımcı olacaktır.

 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 

Çıktı