CSS służy głównie do zapewnienia najlepszego stylu stronie internetowej HTML. Za pomocą CSS możemy określić rozmieszczenie elementów na stronie.
Istnieją różne metody wyrównywania przycisku na środku strony internetowej. Przyciski możemy ustawić zarówno w poziomie, jak i w pionie. Przycisk możemy wyśrodkować, korzystając z następujących metod:
Przyjrzyjmy się powyższym metodom, korzystając z ilustracji.
Przykład
W tym przykładzie używamy wyrównanie tekstu właściwość i ustaw jej wartość na Centrum . Można go umieścić w znaczniku body lub w nadrzędnym znaczniku div elementu.
Tutaj umieszczamy wyrównanie tekstu: do środka; w nadrzędnym znaczniku div elementu przycisku.
Center align button .container{ text-align: center; border: 7px solid red; width: 300px; height: 200px; padding-top: 100px; } #btn{ font-size: 25px; } Click me Przetestuj teraz Wyjście
Przykład
W tym przykładzie używamy wyświetlacz: siatka; własność i margines: samochód; nieruchomość. Tutaj umieszczamy wyświetlacz: siatka; w nadrzędnym znaczniku div elementu przycisku.
Java zamień znak w ciągu
Przycisk zostanie umieszczony pośrodku pozycji poziomej i pionowej.
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> Przetestuj teraz Wyjście
Przykład
To kolejny przykład umieszczenia przycisku na środku. W tym przykładzie używamy wyświetlacz: elastyczny; nieruchomość, justify-content: środek; własność i wyrównanie elementów: środek; nieruchomość.
Ten przykład pomoże nam umieścić przycisk pośrodku pozycji poziomej i pionowej.
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 Przetestuj teraz Wyjście
