Jak wyśrodkować przycisk w div za pomocą CSS

Przyciski są koniecznością dla aplikacji internetowych. Są korzystne w wyzwalaniu różnych funkcji lub wykonywaniu ważnych działań. Jeśli jednak przyciski są ustawione w miejscu, w którym nikt ich nie widzi ani nie przeszkadza, aby je kliknąć, są całkowicie bezużyteczne. Aby uniknąć takich rzeczy, możemy umieścić nasze przyciski w centrum, aby były bardziej widoczne dla użytkowników.

Ten zapis pokaże, jak wyśrodkować element przycisku w div za pomocą CSS.

Jak wyśrodkować przycisk w div za pomocą CSS?

W CSS wykorzystamy następujące właściwości, aby wyśrodkować przycisk wewnątrz Div:

• Wyświetlaj właściwość
• właściwość pozycji

Więc rozwinagajmy każdy!

Metoda 1: Wyśrodkuj przycisk w Div za pomocą właściwości wyświetlania CSS

Aby kontrolować, w jaki sposób zachowuje się wybrany element HTML, „wyświetlacz„Własność jest używana. Ta właściwość jest pomocna w tworzeniu elementów elastycznych w celu ustawiania ich w określonym miejscu, takich jak ustawienie elementu w środku, wyświetlanie właściwości za pomocą justify-content, a można użyć posterunków wyrównanych.

Weźmy przykład, aby potwierdzić działanie właściwości wyświetlania w celu wyśrodkowania przycisku w elemencie div.

Przykład

Tutaj mamy przycisk wewnątrz kontenera na naszej stronie internetowej. Umieśćmy to w centrum:

W naszym pliku HTML określiliśmy przycisk za pomocą „”Tag i zadeklarował to w„". Teraz określ div w tagach.

Html

Mój przycisk

W pliku CSS wykorzystamy „granica„Własność o wartości”Solidny 1.5px”, Gdzie stały jest typem i 1.5px to szerokość granicy. Teraz przypisz odpowiedni wysokość do DIV za pomocą „wysokość„Nieruchomość jak„7rem". „„wyświetlacz„Własność będzie używana z wartością”przewód„Aby zdefiniowana część była elastyczna.

W następnym kroku wyrównujemy przycisk do wyśrodkowania poziomo i pionowo za pomocą wartości „Centrum" dla "justify-content" I "Wyrównanie" nieruchomości.

CSS

div
Border: Solid 1.5px;
Wysokość: 7rem;
Wyświetlacz: Flex;
Justify-Content: Center;
Wyrównanie: Center;

Zapisz kod i uruchom plik HTML w przeglądarce:

Jak widać, pomyślnie wyśrodkowaliśmy przycisk wewnątrz div za pomocą właściwości CSS.

Metoda 2: Wyśrodkuj przycisk w Div za pomocą właściwości pozycji CSS

„„pozycja„Własność jest wykorzystywana do umieszczania elementów HTML w określonej pozycji. Połączenie tej nieruchomości z innymi właściwościami CSS pomaga w zdzięcznym osiągnięciu pożądanych rezultatów.

Przykład

W elemencie DIV weźmiemy wartość „tekst-align„Nieruchomość jako„Centrum„Aby umieścić przycisk poziomo w środku. Dla elementu przycisku określ „pozycja„Własność o wartości”względny”; Spowoduje to, że element przycisku do pozycji względnej ze standardowej pozycji. Następnie ustawimy „szczyt„Wartość nieruchomości do„40%„Aby wyrównać przycisk w środku pionowo.

CSS

div
Border: Solid 1.5px;
Wysokość: 7rem;
Text-Align: Center;

przycisk
Pozycja: względny;
TOP: 40%;

Wyjście

Wyjaśniliśmy najłatwiejsze metody wyśrodkowania przycisku wewnątrz div za pomocą CSS.

Wniosek

Aby wyśrodkować przycisk wewnątrz div, „wyświetlacz" Lub "pozycja”Nieruchomość zostanie wykorzystana. Właściwość wyświetlacza będzie używana z kombinacją innych właściwości, takich jak wyrównanie i uzasadnienie, aby wyśrodkować element przycisku. Ponadto właściwość pozycji jest używana z tekstem i najwyższą właściwością, aby uzyskać pożądany wynik. W tym zapisie wyjaśniliśmy, jak wyśrodkować element przycisku w div za pomocą CSS.