Jak wyrównać przycisk na dole DIV za pomocą CSS?

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.