Kako navpično centrirati element div za vse brskalnike, ki uporabljajo CSS

Pri spletnem razvoju je ključnega pomena, da pravilno ustvarite postavitev elementa. Vendar so številne lastnosti CSS, kot je CSS3 Flexible Box, uporabne za prilagajanje postavitve spletnih strani in elementov HTML. Flexible Box se uporablja za urejanje spletnih strani in aplikacij na rekurziven način. Ta način Flexbox pomaga ustvariti postavitve za kompleksne spletne strani in aplikacije.

Ta objava vas bo vodila, kako navpično centrirati element div za vse brskalnike, ki uporabljajo CSS.

Kako poravnati element div s CSS?

Element div je mogoče navpično poravnati z uporabo lastnosti prikaza ' flex ' skupaj s CSS ' align-items ' lastnina in ' justify-content ” lastnina. Lastnost »align-items« poravna element navpično, lastnost »justify-content« pa poravna vsebino vodoravno.

Primer: Kako navpično centrirati element div s CSS?

V HTML najprej dodajte »

' in mu dodelite razred ' glavna vsebina ”. Med oznake “

” dodajte “ ” z naslednjimi atributi:

---

---

• “ src ” se uporablja za določanje URL-ja slike.
• “ vse ” definira nekaj besedila, ki bo prikazano namesto slike, če se ta ne naloži.
• “ premer ” se uporablja za prilagoditev širine slike.
• Nato dodajte »

  ” za vdelavo odstavka na stran.

Tukaj je koda HTML:

< div razred = 'glavna vsebina' >
< img src = '/images/laptop-notepad.jpg' vse = 'Prenosni računalnik z beležko in pisalom' premer = '300' >
< str > Prenosni računalnik je tudi znan prenosni računalnik kot prenosni računalnik. str >
div >

V CSS bomo divu določili več slogovnih lastnosti.

Slog »glavna vsebina« Razred

.glavna-vsebina {
višina: petdeset % ;
Barva ozadja: #46C2CB;
velikost pisave: 24px;
oblazinjenje: 10px;
}

Naslednje lastnosti CSS so definirane v » glavna vsebina ” razred:

• “ višina Lastnost se uporablja za prilagajanje višine vsebnika
  .
• “ Barva ozadja ” določa barvo ozadja elementa.
• “ velikost pisave ” določa velikost pisave elementa.
• “ oblazinjenje ” lastnost nastavi prostor okoli vsebine elementa.

Iz izhoda lahko opazite, da vsebina elementa div ni v središču:

Pojdimo naprej, da uporabimo lastnosti CSS, ki pomagajo centrirati '

” navpično. Dodajte te lastnosti v razred ' glavna vsebina ”, ki se uporabljajo za dostop do elementa

:

zaslon: flex ;
align-items: center;

Tukaj je opis:

• “ zaslon 'lastnina' flex ” se uporablja za prilagoditev postavitve div svojemu elementu.
• “ align-items Lastnost CSS je nastavljena kot center «, ki bo navpično poravnal elemente div.

Izhod

Naučili ste se, kako centrirati element div navpično za vse brskalnike, ki uporabljajo CSS.

Zaključek

Za navpično centriranje elementa div, CSS ' zaslon Lastnost ' se uporablja z ' flex ” vrednost. Zaradi te vrednosti je vsebnik

prilagodljiv svojim elementom. Za navpično poravnavo elementa div prilagodite ' align-items ' in ji dodelite ' center ” vrednost. Ta spletni dnevnik vam je pokazal, kako uporabiti CSS za navpično centriranje elementov div v vseh brskalnikih.