Jak wyrównać przycisk na dole DIV za pomocą CSS?
Aby stworzyć jasny i symetryczny wygląd elementów, wyrównania są używane na stronach internetowych lub stronach internetowych. CSS pozwala wyrównać elementy HTML w różnych pozycjach, takich jak środek, lewy, prawy i dolny. W tym podręczniku zastosowaliśmy dwie metody do wyrównania przycisku na dole Div:
-
- Metoda 1: Przycisk wyrównywania u dołu Div za pomocą „wyświetlacz" Nieruchomość
- Metoda 2: Przycisk wyrównania u dołu Div za pomocą „pozycja" Nieruchomość
Więc zacznijmy!
Metoda 1: Przycisk wyrównania u dołu DIV za pomocą właściwości „Wyświetl”
W CSS, aby wyrównać przycisk u dołu Div, wartość „wyświetlacz„Własność jest ustalona jako„przewód". Zależy to od rozmiaru rzutni i odpowiednio ustawia treść lub elementy. Wartość elastyczna tworzy również równą przestrzeń między elementami, aby upewnić się, że są one ułożone symetrycznie.
Składnia
Wyświetlacz: Flex
W powyższej składni „przewód”Będzie określony jako wartość„wyświetlacz" nieruchomość.
Sprawdźmy więc przykład, aby wyrównać przycisk na dole za pomocą Flex.
Przykład 1: Przycisk wyrównania u dołu i środka Div
W HTML dodamy jeden główny div i przypisamy nazwę klasy jako „div”I dodaj jego nagłówek i podwodność. Przypisamy nazwę klasy jako „Btn„Aby subspiduat i dodać w nim przycisk za pomocą znacznika.
Html
Przycisk wyrównania u dołu
Po zakończeniu kodu HTML przejdź do CSS.
Tutaj użyjemy „.div„Aby uzyskać dostęp do głównego kontenera, który utworzyliśmy w HTML. Następnie ustawimy wysokość Div jako „150px”I ustaw wartość pozycji jako„względny". Aby stylizować Div, ustaw granicę Div jako „2px”,„solidny", I "RGB (26, 53, 1)”I kolor tła Div jako„RGB (162, 173, 121)".
CSS
.div
Wysokość: 150px;
Pozycja: względny;
granica: 2px stały RGB (26, 53, 1);
kolor tła: RGB (162, 173, 121);
Notatka: Konieczne jest ustawienie pozycji i wysokości Div, aby ustawić przycisk na dole Div.
Następnie użyj „.Btn„Aby uzyskać dostęp do DIV utworzonego w sekcji HTML. Ustaw wartość właściwości wyświetlania jako „przewód”I wysokość jako„130px". Następnie ustaw wartość Justify-Content i Align-Item jako „Centrum„Aby ustawić przycisk na dole Div:
.btn
Wyświetlacz: Flex;
Wysokość: 130px;
Justify-Content: Center;
Wyrównanie: Center;
Wyjście wyżej opisanego kodu podano poniżej. Tutaj możesz zobaczyć ten przycisk w wyrównaniu na dole Div:
Przykład 2: Przycisk wyrównania w lewym dolnym lewym
Aby wyrównać przycisk po lewej dolnej stronie Div, wystarczy zmienić wartość właściwości Justify Contain z centrum na „lewy”:
Justify-Content: Left;
Wyjście
Przykład 3: Przycisk wyrównania w prawym dolnym rogu Div
Aby wyrównać przycisk po prawej dolnej stronie Div, musisz zastąpić wartość właściwości Justify-Content z centrum na „Prawidłowy”:
Justify-Content: Racja;
Wyjście
Teraz przejdź do następnej metody, aby wyrównać przycisk na dole Div.
Metoda 2: Przycisk wyrównania u dołu DIV za pomocą właściwości „pozycji”
„„pozycja”Właściwość służy do określenia innego rodzaju pozycji używanej dla różnych elementów HTML. Składnia właściwości pozycji podano poniżej.
Składnia
Pozycja: statyczny | bezwzględny | stały | względny
W powyższej składni wspomnianej, wymienione są następujące cztery właściwości właściwości pozycji:
-
- statyczny: Służy do ustawienia pozycji zgodnie z normalnym przepływem strony. Ta metoda pozycjonowania jest ustawiona domyślnie.
- względny: Jest wykorzystywany do ustawienia pozycji elementu względem drugiego elementu.
- absolutny: Jest wykorzystywany do dostosowania położenia podelementu na podstawie pozycji jego głównego elementu.
- naprawił: Określa pozycję elementu zgodnie z jego widokiem.
Kontynuujmy przykład, aby dostosować przycisk u dołu Div.
Przykład 1: Przycisk wyrównania w prawym dolnym rogu div
Będziemy kontynuować poprzedni przykład kod HTML i odpowiednio przypisujemy właściwości do Div:
.div
Pozycja: względny;
granica: 2px stały RGB (12, 38, 46);
kolor tła: RGB (55, 104, 119);
Wysokość: 150px;
Następnie ustawimy właściwość pozycji, aby ustawić pozycję przycisku „.Btn„Klasa, która uzyskuje dostęp do przycisku, który utworzyliśmy w HTML. Następnie ustaw wartość właściwości pozycji jako „absolutny”I ustaw dolny i prawy margines jako„5px" I "0px”:
.btn
Pozycja: absolutna;
Dół: 5px;
Racja: 0px;
Notatka: W przypadku głównego div ustawiliśmy wartość właściwości pozycji jako „względny”I Sub Div jako„absolutny". Aby to zrobić, główna div daje kontrolę w celu dostosowania położenia podwodnego. Jeśli ustaliłeś wartość właściwości pozycji zarówno dla rodzica, jak i dzieci jako względna, nie umieszcza ono przycisku na dole div.
Jak widać przy następnym wyjściu, przycisk jest ustawiany w prawym dolnym rogu div:
Przykład 2: Przycisk wyrównania w lewym dolnym lewym
Aby ustawić przycisk w lewą dolnej stronie Div, zastąpimy „Prawidłowy„Nieruchomość z„lewy”I ustaw swoją wartość w następujący sposób:
po lewej: 0px;
Wyjście
Otóż to! Wyjaśniliśmy metodę wyrównania przycisku na dole Div za pomocą CSS.
Notatka: Możemy również ustawić przycisk w środku, podając wartości do „lewy„Nieruchomość ręcznie, ale nie zalecamy jej, ponieważ może to wpłynąć na reakcję strony.
Wniosek
„„wyświetlacz" I "pozycja„Własność CSS jest wykorzystywana do regulacji przycisku na dole Div. Korzystając z właściwości pozycji, ustaw wartość pozycji na element nadrzędny jako „względny”I element dziecięcy jako„absolutny”, A dla właściwości wyświetlacza ustaw ją na wartość jako„przewód". W tym artykule wyjaśniliśmy metodę wyrównania przycisku na dole Div i podaliśmy różne przykłady.