HTML “”Er et brukeraktivert element som utfører enhver handling på klikk. Det er en nøkkelkomponent i nettbaserte skjemaer som vanligvis brukes til å sende inn skjemaet. Videre brukes den også til å flytte til en annen side, legge inn klikkbare bilder og utføre andre nødvendige operasjoner. Brukere kan også bruke CSS -egenskaper for å style knappen, for eksempel knappjustering i alle retninger, sveveeffekt, grense osv.

Denne opplæringen vil undersøke:

• Hvordan lage/lage en knapp i en "div"?
• Hvordan du sentrerer en knapp i en "div"?
• Hvordan style en knapp i en "div"?

Hvordan lage/lage en knapp i en "div"?

For å lage en knapp i en "div”Element, prøv de gitte instruksjonene.

Trinn 1: Lag en div container

Til å begynne med, bruk "”Tag for å lage en“div”Container og tilordne den en“id" Egenskap "Main-div”.

Trinn 2: Sett inn en overskrift

Deretter setter du inn en overskrift ved hjelp av "

" stikkord. Bygg på overskriftstekst mellom de ekstra overskriftskodene.

Trinn 3: Legg til en annen "div" -beholder

Legg til en annen "div”Container sammen med klassen“BTN-sentrum”.

Trinn 4: Opprett knapp

For å opprette en knapp, bruk "”Merk og spesifiser“type”Attributt som“sende inn”. Deretter legge inn litt tekst mellom "”Tagger som vises på knappen:

Klikk på Send -knapp

Sende inn

Det kan legges merke til at knappen er opprettet i beholderen:

Hvordan du sentrerer en knapp i en div?

For å justere en knapp i midten i en “div”Element, vi har listet opp noen metoder:

• Metode 1: Sentre en knapp i en "div" ved hjelp av egenskapen "Display"
• Metode 2: Sentre en knapp i en "div" ved å bruke "posisjon" -egenskap
• Metode 3: Senter en knapp innen en "div" ved å bruke "transform" -egenskapen

Metode 1: sentrum en knapp i en div ved hjelp av "display" -egenskaper

Brukere kan bruke CSS “vise”Eiendom for å sentrere knappen i en“div”. For å gjøre det, prøv de uttalte instruksjonene.

Trinn 1: Stil “Div” -element

For å style “div”Element, først, få tilgang til det ved hjelp av den tildelte ID”#Main-div", hvor "#”Er en CSS ID -velger. Deretter bruker du følgende CSS -egenskaper:

#main-div
grense: 3px solid RGB (7, 39, 223);
Margin: 20px 50px;
bakgrunnsfarge: akvamarin;
Padding-Bottom: 20px;

Her:

• “grense”Eiendom brukes til å spesifisere grensen rundt et element.
• “margin”Tildeler plassen utenfor den definerte grensen.
• “bakgrunnsfarge”Brukes til å stille bakgrunnsfargen på elementet.
• “Padding-Bottom”Definerer et rom inne i elementknappen.

Produksjon

Trinn 2: Sentre knappen i “Div” -beholderen

Få tilgang til knappen ved å bruke klasseattributtet “.BTN-sentrum”. Bruk deretter de underkodede egenskapene:

.btn-center
Display: Flex;
Justify-Content: Center;
Align-elementer: sentrum;

I ovennevnte kodebit:

• “vise”Eiendom spesifiserer visningsatferden til et element. For eksempel settes verdien av denne egenskapen som "Flex”.
• “Justify-Center”Brukes til å justere beholderens elementer fleksibelt horisontalt til hovedaksen.
• “Align-elementer”Eiendom brukes for å spesifisere standardjusteringen inne i nettbeholderen eller flex for elementer.

Produksjon

Metode 2: sentrum en knapp i en div ved hjelp av "posisjon" -egenskapen

For å sentrere en knapp ved hjelp av “posisjon”Først får du tilgang til“div”Container ved å bruke ID”#Main-div”Og bruk de under-nevnte CSS-egenskapene:

#main-div
Høyde: 150px;
Posisjon: relativ;
Margin: 20px 70px;
Grense: 3px dobbel RGB (3, 39, 243);
tekst-align: sentrum;

Her:

• “høyde”Eiendom spesifiserer høyden for det definerte elementet.
• “posisjon”Brukes for å fordele metodenes plassering til et elements type.
• “Tekstalign”Brukes til å stille inn justeringen av teksten.

Produksjon

Metode 3: Senter en knapp innen en "div" ved å bruke "transform" -egenskapen

Å plassere en grense i et senter i et “div”, Bruk“forvandle”CSS -eiendom. For å gjøre det, prøv de gitte instruksjonene.

Trinn 1: Stiloverskrift

Først får du tilgang til overskriften ved hjelp av tagnavnet "H1”:

H1
tekst-align: sentrum;

Deretter bruker du “Tekstalign”Eiendom for å sette inn justering av teksten i sentrum.

Trinn 2: sentrum en knapp innen “div” container

Deretter får du tilgang til den andre “div”Element som inneholder knappen ved hjelp av den tildelte klassen”.BTN-sentrum”Og bruker de gitte egenskapene:

.btn-center
Posisjon: Absolutt;
Topp: 50%;
Venstre: 50%;
Transform: Oversett (-50%, -50%);

Her:

• “posisjon”Eiendom er satt som“Absolutt”Å plassere elementet i forhold til nærmeste stamfar.
• “topp”Og“venstre”Egenskaper brukes til å sette elementets posisjon fra topp- og venstre side.
• “Transform” -egenskap brukes til å transformere elementet ved å bruke “oversette()”Metode. Denne metoden flytter et element fra sin nåværende posisjon i henhold til de medfølgende parametrene sammen med "X ”og“ y”Axis:

Hvordan style knappen i en "div"?

Å style knappen i en "div”Element, først, få tilgang til knappen med tagnavnet”knapp”Og bruk de uttalte CSS -egenskapene:

knapp
Høyde: 50px;
Bredde: 80px;
Border-Radius: 50px;
Farge: RGB (58, 15, 250);
Font: fet;
bakgrunnsfarge: RGB (235, 193, 9);

Beskrivelsen av anvendte egenskaper er som følger:

• “høyde”Og“bredde”Egenskaper setter størrelsen på elementet.
• “Border-Radius”Eiendom skaper elementgrensen avrundede hjørner.
• “farge”Brukes til å spesifisere elementets tekstfarge.
• “Font”Definerer tykkelsen på teksten.

Det kan observeres at knappen er stylet i henhold til kravene:

Dette handler om hvordan du sentrerer knappen i en DIV -beholder.

Konklusjon

Å sentrere en knapp i en "div”Lag først en“”Element og tilordne det en“klasse”Eller“id" Egenskap. Etter det, lag en knapp ved å bruke "" stikkord. For å sentrere en knapp i en "div”Element, Først tilgang til beholderen og bruk CSS -egenskapen”vise”,“forvandle”, Eller“posisjon”For å plassere en knapp i midten. Denne opplæringen har forklart forskjellige metoder for å sentrere knappen innenfor en "div”Element.