Hvordan kan jeg sentrere tekst i en div

Mens de designer websider, kan utviklere legge til forskjellige komponenter, inkludert bilder, tekst, tabeller og andre. Videre kan tekst være midtpasset i en div ved hjelp av flere CSS -egenskaper. Den mest populære metoden for horisontalt sentreringstekst er å bruke "Tekstalign" Egenskap. Dessuten kan du også bruke "linjehøyde”Og“vertikal-align”Attributter for vertikalt å justere teksten.

Dette innlegget vil oppgi metoden for å sentrere teksten vertikalt så vel som horisontalt inne i en div.:

Hvordan du sentrerer tekst horisontalt inne i en div?

For å sentrere tekst horisontalt inne i en div, sjekk ut den gitte prosedyren.

Trinn 1: Lag en div container

Opprinnelig lage en div -container ved hjelp av "”Element. Sett deretter inn en "id”Attributt inne i div åpningskoden. Etter det, legg inn litt tekst mellom Div -taggen:

Linuxhint er en av de beste nettstedene for oppretting av innhold.

Produksjon

Trinn 2: Access Div Container for å midtre justere tekst

Nå får du tilgang til DIV -beholderen ved hjelp av "id”Attributtnavn med velger”#”Og bruk følgende CSS -egenskaper:

#justering av justering
Bredde: 80%;
Margin: 0 Auto;
polstring: 20px;
Bakgrunn: #C8Edf3;
tekst-align: sentrum;
Farge: RGB (49, 15, 240);

Her:

• • “bredde”Eiendom brukes til å sette breddestørrelsen på beholderen.
  • “margin”Angir et tomt rom utenfor beholderen.
  • “polstring”Definerer et rom inne i elementets grense.
  • “bakgrunn”Setter bakgrunnsfargen på baksiden av elementet.
  • “Tekstalign”Eiendom brukes til å stille inn justering av teksten som“senter”.
  • “farge”Angir en farge for teksten innenfor grensen.

Det kan observeres at vi har sentrert justert tekst horisontalt inne i den opprettede div:

Hvordan du sentrerer tekst vertikalt inne i en div?

For å sentrere tekst vertikalt inne i en div -beholder, følg de medfølgende instruksjonene.

Trinn 1: Få tilgang til Div Container

Først av alt, få tilgang til den opprettede div container.

Trinn 2: Bruk CSS -egenskaper på sentertekst vertikalt

Bruk deretter de nedenfor listede CSS -egenskapene på sentrum av tekst vertikalt i en div:

#justering av justering
Display: bordcelle;
Bredde: 300px;
Høyde: 150px;
polstring: 10px;
Farge: blå;
bakgrunnsfarge: RGB (248, 215, 166);
Border: 3px stiplet #F09D03;
vertikal-align: midten;

I henhold til ovennevnte kodebit:

• • Sett "vise”Som spesifiserer skjermatferden til elementet som“Bordcelle”, Som betyr at det fungerer som cellen i tabellen i DIV -elementet.
  • “bredde”Eiendom spesifiserer elementets bredde størrelse.
  • “høyde”Setter høyden på elementet.
  • “polstring”Definerer et tomt rom inne i elementet.
  • “farge”Brukes for å sette fargen på teksten inne i elementet.
  • “bakgrunnsfarge”Angir fargen på elementets bakside.
  • “grense”Eiendom definerer en grense på et element.
  • “vertikal-align”Eiendom brukes til å sette den vertikale innretningen av et definert element i“midten”.

Produksjon

Du har lært om den komplette prosedyren for å sentrere teksten inne i beholderen på begge måter, vertikalt og horisontalt.

Konklusjon

For å sentrere teksten vertikalt og horisontalt inne i en div, oppretter du først en DIV -beholder ved hjelp av element og får tilgang til den ved å bruke velgeren. Bruk deretter CSS -egenskaper der "Tekstalign”Eiendom brukes til horisontal innretting, og“vertikal-align”Angir vertikal innretting. Dette innlegget demonstrerte metodene for å sentrere teksten vertikalt og horisontalt inne i en div.