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:

wyrównanie tekstu: wyśrodkuj- Ustawiając wartość właściwości text-align nadrzędnego znacznika div na środek.margines: automatyczny- Ustawiając wartość właściwości marginesu na auto.wyświetlacz: elastyczny- Ustawiając wartość właściwości display na flex i wartość uzasadnij-treść własność do Centrum .wyświetlacz: siatka- Ustawiając wartość właściwości wyświetlania na siatce.

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 

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> 

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 

Wyjście