Slik sentrerer du et div-element vertikalt for alle nettlesere som bruker CSS

I webutvikling er det avgjørende å lage elementets layout riktig. Imidlertid er mange CSS-egenskaper, for eksempel CSS3 Flexible Box, nyttige for å justere oppsettet til nettsider og HTML-elementer. Flexible Box brukes til å ordne nettsider og applikasjoner på en rekursiv måte. Denne Flexbox-modusen hjelper deg med å lage oppsett for komplekse nettsider og applikasjoner.

Dette innlegget vil veilede deg om hvordan du sentrerer et div-element for alle nettlesere som bruker CSS vertikalt.

Hvordan justere div-element ved hjelp av CSS?

div-elementet kan justeres vertikalt ved å bruke visningsegenskapen ' bøye seg ' sammen med CSS ' align-elementer ' eiendom og ' rettferdiggjøre-innhold ' eiendom. Egenskapen «align-items» justerer elementet vertikalt, og «justify-content»-egenskapen justerer innholdet horisontalt.

Eksempel: Hvordan sentrere et div-element vertikalt med CSS?

I HTML legger du først til en '

'element og tilordne det klassen ' hovedinnhold '. Mellom «

»-taggene legger du til en « ' element med følgende attributter:

---

---

• ' src ”-attributtet brukes til å spesifisere URL-en til bildet.
• ' alt ”-attributt definerer noe tekst som vil vises i stedet for et bilde hvis det ikke lar seg laste.
• ' bredde ”-attributtet brukes til å justere bildets bredde.
• Deretter legger du til '

  ”-element for å bygge inn avsnittet på siden.

Her er HTML-koden:

< div klasse = 'hovedinnhold' >
< img src = '/images/laptop-notepad.jpg' alt = 'Bærbar datamaskin med notisblokk og penn' bredde = '300' >
< s > Bærbar datamaskin er en bærbar datamaskin også kjent som en bærbar datamaskin. s >
div >

I CSS vil vi spesifisere flere stylingegenskaper til div.

Klasse 'hovedinnhold' stil

.hovedinnhold {
høyde: femti % ;
bakgrunnsfarge: #46C2CB;
skriftstørrelse: 24px;
polstring: 10px;
}

Følgende CSS-egenskaper er definert i ' hovedinnhold ' klasse:

• ' høyde ”-egenskapen brukes til å justere høyden på
  -beholderen.
• ' bakgrunnsfarge ' definerer elementets bakgrunnsfarge.
• ' skriftstørrelse ' spesifiserer elementets skriftstørrelse.
• ' polstring egenskapen setter plass rundt elementets innhold.

Fra utgangen kan du observere at innholdet i div-elementet ikke er i sentrum:

La oss gå videre for å bruke CSS-egenskapene som hjelper til med å sentrere '

' element vertikalt. Legg til disse egenskapene til klassen ' hovedinnhold ' som brukes for å få tilgang til

-elementet:

vise: bøye seg ;
align-items: center;

Her er beskrivelsen:

• ' vise ' eiendom ' bøye seg ” brukes til å gjøre div-oppsettet fleksibelt til sitt element.
• ' align-elementer ' CSS-egenskap er satt som en ' senter ”, som vil justere div-elementene vertikalt.

Produksjon

Du har lært hvordan du sentrerer et div-element vertikalt for alle nettlesere som bruker CSS.

Konklusjon

For å sentrere et div-element vertikalt, CSS ' vise ' eiendom brukes med ' bøye seg 'verdi. Denne verdien gjør

-beholderen fleksibel i forhold til elementene. For å justere div-elementet vertikalt, juster ' align-elementer ' eiendom og tilordne den en ' senter 'verdi. Denne bloggen har vist deg hvordan du bruker CSS til å sentrere div-elementer vertikalt i alle nettlesere.