A div elem függőleges középre állítása az összes CSS-t használó böngésző számára

A webfejlesztés során kulcsfontosságú az elem elrendezésének megfelelő elkészítése. Azonban számos CSS-tulajdonság, például a CSS3 Flexible Box hasznos a weboldalak és a HTML-elemek elrendezésének beállításához. A Flexible Box a weboldalak és alkalmazások rekurzív elrendezésére szolgál. Ez a Flexbox mód segít elrendezések létrehozásában összetett weboldalak és alkalmazások számára.

Ez a bejegyzés elvezeti Önt, hogyan helyezhet középre egy div elemet minden CSS-t használó böngészőben függőlegesen.

Hogyan igazítsuk be a div elemet CSS használatával?

A div elem függőlegesen beállítható a ' display tulajdonság használatával Flex ' a CSS-sel együtt' align-ites ' ingatlan és ' indokolja-tartalom ' ingatlan. Az „align-items” tulajdonság függőlegesen, az „justify-content” tulajdonság pedig vízszintesen igazítja a tartalmat.

Példa: Hogyan lehet függőlegesen középre igazítani egy div elemet CSS-sel?

A HTML-ben először adjon hozzá egy „

' elemet, és rendelje hozzá az osztályt ' központi téma ”. A „

” címkék közé adjon hozzá egy „ ” elem a következő attribútumokkal:

---

---

• ' src ” attribútum a kép URL-jének megadására szolgál.
• ' minden ” attribútum olyan szöveget határoz meg, amely a kép helyén jelenik meg, ha nem sikerül betölteni.
• ' szélesség ” attribútum a kép szélességének beállítására szolgál.
• Ezután adja hozzá a „

  ” elemet a bekezdés oldalba ágyazásához.

Íme a HTML kód:

< div osztály = 'központi téma' >
< img src = '/images/laptop-notepad.jpg' minden = 'Laptop jegyzettömbbel és tollal' szélesség = '300' >
< p > A laptop egy hordozható számítógép is ismert mint egy notebook számítógép. p >
div >

A CSS-ben több stílustulajdonságot is megadunk a div-nek.

Stílus „főtartalom” osztály

.központi téma {
magasság: ötven % ;
háttérszín: #46C2CB;
betűméret: 24 képpont;
padding: 10px;
}

A következő CSS-tulajdonságokat a ' központi téma ' osztály:

• ' magasság ” tulajdonság a
  tároló magasságának beállítására szolgál.
• ' háttérszín ” határozza meg az elem háttérszínét.
• ' betűméret ” határozza meg az elem betűméretét.
• ' párnázás ” tulajdonság teret állít be az elem tartalma körül.

A kimenetből megfigyelhető, hogy a div elem tartalma nincs középen:

Folytassuk a CSS-tulajdonságok alkalmazásával, amelyek segítenek a „

” elemet függőlegesen. Adja hozzá ezeket a tulajdonságokat a ' osztályhoz központi téma ', amelyeket a

elem eléréséhez használnak:

kijelző: Flex ;
align-ites: center;

Itt a leírás:

• ' kijelző ' ingatlan ' Flex ” segítségével a div elrendezés rugalmassá válik az eleméhez képest.
• ' align-ites ' A CSS tulajdonság '' központ ”, amely függőlegesen igazítja a div elemeket.

Kimenet

Megtanulta, hogyan kell a div elemet függőlegesen középre helyezni minden CSS-t használó böngészőben.

Következtetés

A div elem függőleges középre állításához a CSS ' kijelző ' ingatlan a ' Flex ” értékét. Ez az érték rugalmassá teszi a

tárolót az elemeihez. A div elem függőleges igazításához állítsa be a „ align-ites ' tulajdonságot, és rendeljen hozzá egy ' központ ” értékét. Ez a blog bemutatja, hogyan használhatja a CSS-t a div elemek függőleges középre állításához minden böngészőben.