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:
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 Şimdi Test Edin Çı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> Şimdi Test Edin Çı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 Şimdi Test Edin Çıktı
