Jak wyśrodkować przycisk za pomocą CSS Flexbox

W HTML przyciski są elementami klikalnymi używanymi do wykonywania konkretnej akcji. Korzystając z CSS, możesz ustawić pozycję przycisku, w której chcesz ją umieścić. W tym celu istnieje kilka technik w CSS, jedna z nich jest Flexbox. "przewód”Służy do ustawienia pozycji elementu zgodnie z jego rzutniem.

W tym artykule nauczy się wyśrodkować przycisk za pomocą CSS Flexbox.

Więc zacznijmy!

Jak wyśrodkować przycisk za pomocą CSS Flexbox?

"przewód”To zestaw wartości dla właściwości wyświetlania CSS. W zależności od rozmiaru rzutni ustawia odpowiednio treść lub elementy. W CSS wartość elastyczna tworzy równą przestrzeń między elementami, aby upewnić się, że są one skutecznie rozmieszczone.

Składnia

W powyższej składni „przewód”Będzie określony jako wartość„wyświetlacz" nieruchomość.

Sprawdźmy więc przykład, aby scentralizować przycisk za pomocą Flex.

Przykład

W HTML utworzymy pojemnik z klasą o nazwie „przycisk”I wewnątrz utworzy przycisk za pomocą znacznika:

W pliku CSS „.przycisk”Służy do dostępu do klasy, którą przypisaliśmy do . Aby ustawić pozycję dodanego przycisku na środku Div, przypiszemy wartość właściwości wyświetlania, Justify-Content i Align-Items jako „przewód”,„Centrum", I "Centrum”Odpowiednio. Ponadto ustawimy wysokość stworzonego Div, aby „200px”I przypisz wartość granicy jako„5px”,„solidny" I "czarny”:

W powyższym kodzie „justify-content”Służy do ustawiania przycisku na środku Div w poziomie i„ ”wyrównanie”Służy do ustawienia przycisku na środku div pionowo.

Po wdrożeniu powyższego kodu przejdź do pliku HTML i wykonaj go, aby zobaczyć następujący wynik:

Możesz zobaczyć, że przycisk jest z powodzeniem wyświetlany na środku div.

Wniosek

Aby wyśrodkować przycisk, możesz użyć „wyświetlacz”,„wyrównanie", I "justify-content„Właściwości CSS. Właściwości te pozwalają ustawić przycisk na środku div lub dowolnego elementu, gdy okreścisz wartość właściwości wyświetlania jako „przewód”, Wyrównanie i uzasadnienie, jako„Centrum". W tym artykule wyjaśniliśmy, jak wyśrodkować przycisk za pomocą FlexBox za pomocą odpowiedniego przykładu.