Nettutviklere er avhengige av overskrifter når de vil fremheve en viktig tekstdel på websiden. Overskrifter kan brukes til å oppfylle forskjellige mål; Hovedformålet forblir imidlertid det samme, og det er å legge vekt på viktig tekst eller skille en seksjon fra en annen. Som standard er overskriftene rettet mot venstre; For å fange oppmerksomheten til den besøkende og gjøre det mer synlig, kan du imidlertid sette overskriften i sentrum.

Denne guiden vil demonstrere hvordan du sentrerer H1 i CSS.

Hvordan du sentrerer H1 i CSS?

For å sentrere H1, vil vi bruke følgende CSS -egenskaper:

• tekst-justeringseiendom
• Vis eiendom
• Stillingseiendom

La oss komme i gang med metode en!

Metode 1: Bruk tekst-justering av egenskap til sentrum H1 i CSS

I CSS, “Tekstalign”Eiendom brukes til å angi teksten til HTML -elementer til venstre, sentrum eller høyre horisontalt. Generelt kan vi si at denne egenskapen er veldig nyttig for tekstjustering.

Her ser på eksemplet nedenfor for å forstå hvordan den tekstjusterte egenskapen fungerer.

Eksempel

Vi har en høring på websiden for øyeblikket på linje med venstre side som standard. La oss få denne overskriften i sentrum:

I HTML -filen, angi

Merk i kroppsdelen og legg til litt tekst i den.

Html

Min overskrift

I CSS -filen bruker vi “Tekstalign”Eiendom og setter verdien til“senter”. Dette vil justere overskriften H1 til sentrum.

CSS

H1
tekst-align: sentrum;

Lagre koden og åpne den i nettleseren:

Som du kan se, har vi sentrert H1 ved hjelp av CSS-tekst-justeringsegenskaper.

Metode 2: Bruk skjermegenskaper til å sentrum H1 i CSS

Når det gjelder å definere HTML -elementoppførselen, "vise”Eiendom brukes. Denne egenskapen har noen nyttige verdier, for eksempel flex og blokkering. Dessuten er elementets fleksible oppførsel et resultat av flexverdi, og elementets blokkering av blokkering er et resultat av blokkeringsverdi.

Eksempel

For det første, spesifiser "vise”Eiendom og dens verdi til“Flex”. Dette vil gjøre heading -elementet fleksibelt. I neste trinn, bruk "Justify-Content”Eiendom med verdien”senter”For å sette overskriften i sentrum.

CSS

H1
Display: Flex;
Justify-Content: Center;

Produksjon

Overskriften H1 er på linje med sentrum.

Metode 3: Bruk posisjonseiendom for å sentrere H1 i CSS

Dette “posisjon”Eiendom er selvforklarende; Det bestemmer hvordan et HTML -element vil bli plassert på en eller annen stilling. Å kombinere denne egenskapen med andre CSS -egenskaper vil resultere i å oppnå ønsket mål, som setter overskriften H1 i CSS.

Eksempel

Å sentrere H1, “posisjon”Eiendom kan brukes med verdien”slektning”. Dette vil omorganisere elementets normale posisjon. Nå, bruk "venstre”Eiendom, og setter verdien til“40%”Å skape et rom fra venstre side vil bli opprettet, og overskriften vår vil være på linje med sentrum.

CSS

H1
Posisjon: relativ;
Venstre: 40%;

Produksjon

Vi har forklart de enkleste metodene for sentrum H1 i CSS.

Konklusjon

Til sentrum H1, CSS “Tekstalign”,“vise”, Eller“posisjon”Egenskaper kan brukes. For det nevnte formålet vil den tekstjusterte egenskapen bli brukt med "senter”, Vil visningsegenskapen bli brukt med“Flex”Verdi, og vi vil sette posisjonsegenskapsverdien”slektning”For å få ønsket resultat. Denne artikkelen har dekket hvordan du sentrerer H1 ved å bruke forskjellige CSS -egenskaper.