Hvordan du vertikalt sentrerer et divelement for alle nettlesere som bruker CSS

I nettutvikling er det avgjørende å lage elementets oppsett riktig. Imidlertid er mange CSS -egenskaper, for eksempel CSS3 fleksibel boks, nyttige for å justere utformingen av websider og HTML -elementer. Fleksibel boks brukes til å ordne websider og applikasjoner på en rekursiv måte. Denne Flexbox -modusen hjelper til med å lage oppsett for komplekse websider og applikasjoner.

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

Hvordan justere divelementet ved hjelp av CSS?

DIV -elementet kan loddres vertikalt ved å bruke visningsegenskapen "Flex”Sammen med CSS”Align-elementer”Eiendom og“Justify-Content”Eiendom. Egenskapen “Align-Items” justerer elementet vertikalt, og egenskapen "Justify-Content" justerer innholdet horisontalt.

Eksempel: Hvordan du kan sentrere et divelement med CSS vertikalt?

I HTML, først, legg til en "”Element og tilordne det klassen“hovedinnhold”. I mellom "" -merkerne, legg til en "”Element med følgende attributter:

• “src”Attributt brukes til å spesifisere URL -en til bildet.
• “alt”Attributt definerer noen tekst som vises i stedet for et bilde hvis det ikke klarer å laste.
• “bredde”Attributt brukes til å justere bildens bredde.
• Deretter legger du til “

  ”Element for å legge inn avsnittet til siden.

Her er HTML -koden:

Laptop er en bærbar datamaskin også kjent som en bærbar datamaskin.

I CSS vil vi spesifisere flere stylingegenskaper til DIV.

Stil "hovedinnhold" -klasse

.hovedinnhold
Høyde: 50%;
Bakgrunnsfarge: #46C2CB;
Font-størrelse: 24px;
polstring: 10px;

Følgende CSS -egenskaper er definert i “hovedinnhold”Klasse:

• “høyde”Eiendom brukes til å justere høyden på beholderen.
• “bakgrunnsfarge”Definerer elementets bakgrunnsfarge.
• “skriftstørrelse”Angir elementets skriftstørrelse.
• “polstring”Eiendom 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 i klassen "hovedinnhold”Som brukes til å få tilgang til elementet:

Display: Flex;
Align-elementer: sentrum;

Her er beskrivelsen:

• “vise”Eiendom”Flex”Brukes til å gjøre DIV -oppsettet fleksibelt for elementet.
• “Align-elementer”CSS -eiendom er satt som en“senter”, Som vertikalt vil justere divelementene.

Produksjon

Du har lært hvordan du sentrerer et DIV -element vertikalt for alle nettlesere ved hjelp av CSS.

Konklusjon

For vertikalt sentrerer et DIV -element, CSS “vise”Eiendom brukes med“Flex”Verdi. Denne verdien gjør beholderen fleksibel for elementene. For å justere divelementet vertikalt, juster "Align-elementer”Eiendom og tilordne den en“senter”Verdi. Denne bloggen har vist deg hvordan du bruker CSS for å senter divelementer i alle nettlesere i alle nettlesere.