HTML "”To element aktywowany przez użytkownika, który wykonuje dowolną akcję przy kliknięciu. Jest to kluczowy element formularzy internetowych, które są zwykle używane do przesłania formularza. Ponadto jest również wykorzystywany do przejścia na inną stronę, osadzanie klikalnych obrazów i wykonywania innych wymaganych operacji. Użytkownicy mogą również stosować właściwości CSS, aby stylizować przycisk, takie jak wyrównanie przycisków we wszystkich kierunkach, efekt najemnika, granica itp.

Ten samouczek zbada:

• Jak zrobić/utworzyć przycisk w „Div”?
• Jak wyśrodkować przycisk w „Div”?
• Jak stylizować przycisk w „Div”?

Jak zrobić/utworzyć przycisk w „Div”?

Zrobić przycisk w „div„Element, wypróbuj podane instrukcje.

Krok 1: Utwórz kontener Div

Początkowo skorzystaj z „„Tag, aby utworzyć„div”Pojemnik i przypisz go„ID" atrybut "Main-Div".

Krok 2: Włóż nagłówek

Następnie wstaw nagłówek z pomocą „

”Tag. Osadzaj tekst nagłówka między dodanymi tagami nagłówka.

Krok 3: Dodaj kolejny pojemnik „Div”

Dodaj inny "div„Pojemnik wraz z klasą”BTN-CENTER".

Krok 4: Utwórz przycisk

Aby utworzyć przycisk, użyj „”Tag i określ„typ”Atrybut jako„składać". Następnie osadziłem trochę tekstu między „„Tagi, które będą wyświetlane na przycisku:

Kliknij przycisk Prześlij

Składać

Można zauważyć, że przycisk został utworzony w pojemniku:

Jak wyśrodkować przycisk w Div?

Aby wyrównać przycisk w środku w obrębie „div„Element, wymieniliśmy niektóre metody:

• Metoda 1: Wyśrodkuj przycisk w „Div” za pomocą właściwości „Wyświetl”
• Metoda 2: Wyśrodkuj przycisk w „Div” za pomocą właściwości „pozycji”
• Metoda 3: Wyśrodkuj przycisk w „Div” za pomocą właściwości „Transform”

Metoda 1: Wyśrodkuj przycisk w Div za pomocą właściwości „Wyświetl”

Użytkownicy mogą korzystać z CSS ”wyświetlacz„Nieruchomość, aby wyśrodkować przycisk w„div". Aby to zrobić, wypróbuj podane instrukcje.

Krok 1: Element „Div” stylu

Stylizować „div„Element, po pierwsze, dostęp do niego za pomocą przypisanego identyfikatora”#Main-Div", Gdzie "#”To selektor identyfikatora CSS. Następnie zastosuj następujące właściwości CSS:

#Main-Div
granica: 3px Solid RGB (7, 39, 223);
Margines: 20px 50px;
kolor tła: akwamaryna;
Wyściółka: 20px;

Tutaj:

• "granica„Właściwość jest wykorzystywana do określenia granicy wokół elementu.
• "margines„Przydziela przestrzeń poza zdefiniowaną granicą.
• "kolor tła”Służy do ustawienia koloru tła elementu.
• "Wyściółka”Definiuje miejsce wewnątrz przycisku elementu.

Wyjście

Krok 2: Wyśrodkuj przycisk w pojemniku „Div”

Teraz uzyskaj dostęp do przycisku, wykorzystując atrybut klasy „.BTN-CENTER". Następnie zastosuj poniżej kodowane właściwości:

.BTN-CENTER
Wyświetlacz: Flex;
Justify-Content: Center;
Wyrównanie: Center;

W powyższym fragmencie kodu:

• "wyświetlacz”Właściwość określa zachowanie wyświetlania elementu. Na przykład wartość tej właściwości jest ustalana jako „przewód".
• "Justify-Center”Służy do wyrównania elementów pojemnika elastycznego poziomu do osi głównej.
• "Wyrównanie„Własność jest wykorzystywana do określenia domyślnego wyrównania wewnątrz pojemnika siatki lub Flex dla elementów.

Wyjście

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

Aby wyśrodkować przycisk za pomocą „pozycja„Nieruchomość, po pierwsze, dostęp do„div”Pojemnik za pomocą identyfikatora„#Main-Div”I zastosuj poniżej wspomniane właściwości CSS:

#Main-Div
Wysokość: 150px;
Pozycja: względny;
Margines: 20px 70px;
granica: 3PX podwójny RGB (3, 39, 243);
Text-Align: Center;

Tutaj:

• "wysokość„Właściwość określa wysokość dla zdefiniowanego elementu.
• "pozycja”Jest wykorzystywany do przydzielania pozycji metody do typu elementu.
• "tekst-align”Służy do ustawiania wyrównania tekstu.

Wyjście

Metoda 3: Wyśrodkuj przycisk w „Div” za pomocą właściwości „Transform”

Umieścić granicę w centrum w obrębie „div”, Użyj„przekształcać„Własność CSS. Aby to zrobić, wypróbuj podane instrukcje.

Krok 1: Style nagłówka

Najpierw uzyskaj dostęp do nagłówka za pomocą nazwy tagu „H1”:

H1
Text-Align: Center;

Następnie zastosuj „tekst-align„Właściwość do ustawiania wyrównania tekstu w centrum.

Krok 2: Wyśrodkuj przycisk w pojemniku „Div”

Następnie dostęp do drugiego „div„Element zawierający przycisk za pomocą przypisanej klasy„.BTN-CENTER”I stosuje podane właściwości:

.BTN-CENTER
Pozycja: absolutna;
TOP: 50%;
Po lewej: 50%;
Transform: Tłumacz (-50%, -50%);

Tutaj:

• „„pozycja„Własność jest ustalona jako„absolutny”Aby ustawić element względem najbliższego przodka.
• "szczyt" I "lewy„Właściwości są wykorzystywane do ustawiania pozycji elementu z góry i lewej strony.
• Właściwość „transformacja” służy do przekształcania elementu za pomocą „Tłumaczyć()" metoda. Ta metoda przesuwa element z jego bieżącej pozycji zgodnie z dostarczonymi parametrami wraz z „X ”i„ y„Oś:

Jak stylizować przycisk w „Div”?

Aby stylizować przycisk w „”div”Element, najpierw dostęp do przycisku z nazwą tagu„przycisk”I zastosuj określone właściwości CSS:

przycisk
Wysokość: 50px;
Szerokość: 80px;
Radiusz graniczny: 50px;
Kolor: RGB (58, 15, 250);
pogrubiona czcionka;
kolor tła: RGB (235, 193, 9);

Opis stosowanych właściwości jest następujący:

• „„wysokość" I "szerokość”Właściwości ustawiają rozmiar elementu.
• "Radiusz graniczny„Właściwość tworzy granicę elementu zaokrąglone rogi.
• "kolor”Jest wykorzystywany do określenia koloru tekstu elementu.
• "czcionka”Definiuje grubość tekstu.

Można zauważyć, że przycisk jest stylizowany zgodnie z wymaganiami:

Chodzi o to, jak wyśrodkować przycisk w pojemniku Div.

Wniosek

Aby wyśrodkować przycisk w ramach „div”, Po pierwsze, stwórz„”Element i przypisz go„klasa" Lub "ID" atrybut. Następnie zrób przycisk, wykorzystując „”Tag. Następnie, aby wyśrodkować przycisk w obrębie „div„Element, najpierw dostęp do kontenera i zastosuj właściwość CSS”wyświetlacz”,„przekształcać", Lub "pozycja„Aby umieścić przycisk w środku. Ten samouczek wyjaśnił różne metody wyśrodkowania przycisku w ramach „div" element.