I HTML brukes inngangsfelt til å lage skjemaer. Dette lar deg få innspill fra brukeren, for eksempel navn, adresse og telefonnummer. I CSS kan du style inngangsfeltene på forskjellige måter, som å endre fargen på inngangsfeltet, endre størrelse, legge til grenser og sentrere. Mer spesifikt er det forskjellige metoder for å justere inngangsfeltet, inkludert venstre, høyre, midt, topp og bunn.

I denne artikkelen lærer vi hvordan du sentrerer inngangsfeltet ved å bruke tre forskjellige metoder i CSS, som er:

• Sentrum et inngangsfelt ved å bruke "Tekstalign”
• Sentrum et inngangsfelt ved å bruke "margin”
• Sentrum et inngangsfelt ved å bruke "Nett”

For å justere inngangsfeltet i midten av HTML -elementet; Først må du lære metoden for å lage inngangsfeltet og deretter style den.

La oss begynne!

Hvordan lage inngangsfelt i div ved hjelp av html?

I HTML vil vi lage en div og tildele klassen “div”Til det og legg til en overskrift

inne i taggen. Etter det, oppretter en underdiv og tildel klassenavnet som "inngang”Og et inngangsfelt i det ved hjelp av taggen; Angi typen inngangsfelt som "tekst”, Og i plassholderen, legg til teksten som“Tast inn navnet ditt”. Den ekstra vil forsvinne når en bruker skriver noe i inngangsfeltet

Html

Senterinngangsfelt ved hjelp av tekst-align

I utgangen nedenfor kan du se at inngangsfeltet er opprettet med suksess i Div:

Etter det, flytt til CSS for å style HTML -elementene.

Hvordan style div ved hjelp av CSS?

I CSS -filen, bruk ".div”For å få tilgang til diven som er opprettet i HTML. Sett deretter høyden på divet som "250px”, Legg til en bakgrunnsfarge som“RGB (134, 240, 227)”Og sett grensebredden som“10px”, Stil som“ridge”, Og farge som“RGB (2, 141, 127)”.

CSS

.div
Høyde: 250px;
Bakgrunn: RGB (134, 240, 227);
Border: 10px Ridge RGB (2, 141, 127);

Produksjon

Nå vil vi sjekke ut forskjellige metoder for å midtre i et inngangsfelt ved hjelp av CSS.

Metode 1: Hvordan sentrum av et inngangsfelt ved å bruke "tekst-align"?

For å sentrere inngangsfeltet, vil vi bruke "Tekstalign”Eiendom til CSS. Det brukes til å stille inn den horisontale justeringen av tekst i HTML -elementene som venstre, høyre, sentrum og rettferdiggjøre.

Syntaks

Syntaksen til den tekstjusterte egenskapen er:

tekst-align: venstre | høyre | senter | rettferdiggjør

Beskrivelsen av den ovennevnte syntaks er gitt nedenfor:

• venstre: Det er standardverdien for den tekstjusterte egenskapen som brukes til å angi teksten på venstre side av HTML-elementet.
• Ikke sant: Den brukes til å justere tekst på høyre side.
• senter: Den spesifiserer midtpunktet av teksten.
• rettferdiggjøre: Ved å bruke det er ordene spredt til en full linje.

La oss fortsette eksemplet og justere inngangsfeltet i midten av Div.

Eksempel

Her vil vi bruke “.inngang”For å få tilgang til underdiven der inngangsfeltet opprettes i. Etter det vil vi sette verdien av den tekstjusterte egenskapen som “senter”For å sentrere inngangsfeltet:

.input
tekst-align: sentrum;

Følgende bilde viser at inngangsfeltet er på linje i sentrum av DIV:

Metode 2: Hvordan sentrum av et inngangsfelt ved å bruke "margin"?

For å lage et gjennomsiktige område rundt et element, “margin”Eiendom til CSS brukes. Denne egenskapen lar deg sette marginen til et element fra venstre, høyre, øverste og nedre sider. Det er også en kortvarig eiendom av marginbunn, margin-top, margin-høyre og margin-venstre egenskaper. I en linje kan du angi alle fire verdiene.

Syntaks

Syntaks for marginegenskapen er gitt nedenfor:

Margin: Lengde | Auto

“lengde”Og“bil”Er verdiene på marginegenskapen som brukes til:

• lengde: Det brukes til å stille marginen manuelt.
• Auto: Det lar nettleseren stille marginen rundt et element av seg selv.

La oss fortsette eksemplet og sentrere inngangsfeltet.

Eksempel

Tenk på det forrige eksemplet og endre stilen på grensen ved å bruke grenseeiendommen. Etter det, inne i “inngang”Klasse, bruk marginegenskapen for å senter justere inngangsfeltet. Angi verdien av marginen som "bil”Og vis det som“blokkere”For å sentrere inngangsfeltet. Her har vi brukt verdien av displayegenskapen som en blokk fordi den lar et element vises i en blokk og tar opp hele linjebredden:

input
Margin: Auto;
Display: Block;

Ved hjelp av koden over oppnås følgende utgang:

Etter vellykket implementering av den andre metoden, vil vi flytte til den tredje metoden.

Metode 3: Hvordan sentrum av et inngangsfelt ved hjelp av "rutenett"?

For å sentrere inngangsfeltet, vil vi bruke visningsegenskapen og angi verdiene som "Nett”. Det lar et element vises i en rutenettbeholder.

Syntaks

Syntaksen til displayegenskapen er:

Display: rutenett;

Som en fortsettelse av det forrige eksempelet, la oss senter justere inngangsfeltet.

Eksempel

Bruke ".inngang”For å få tilgang til underdiven der inngangsfeltet opprettes og angi verdien av displayegenskapen som“Nett”For å stille den i en rutenettbeholder. Etter det, sett nettbeholderen i “senter”Av DIV ved å bruke eiendommen Justify-Content:

.input
Display: rutenett;
Justify-Content: Center;

Den gitte utgangen betyr at inngangsfeltet er rettet i midten av div:

Det er det! Vi har forklart metoden for å sentrere et inngangsfelt ved bruk av CSS.

Konklusjon

Inngangsfelt plasseres i sentrum av DIV ved å bruke tre forskjellige metoder for CSS, som er "Nett”Verdier for visningsegenskapen,“Tekstalign”, Og“margin" egenskaper. Disse egenskapene lar deg justere elementene i henhold til dine krav. I denne guiden har vi diskutert tre metoder for å justere inngangsfeltet i sentrum.