Mindenki, aki részt vesz az elrendezésben, előbb-utóbb szembesül azzal, hogy az elemeket függőlegesen kell igazítani... és tudja, milyen nehézségek adódhatnak egy elem középre igazítása során. A CSS-nek van egy "vertikális igazítási" tulajdonsága több értékkel, aminek logikailag meg kell felelnie függőleges igazítás. A gyakorlatban azonban nem úgy működik, ahogyan az elvárná.

Számos technika létezik a probléma megoldására. Az alábbiakban mindegyiket nézzük meg közelebbről.

1. Igazítás egy táblázathoz

Ebben az esetben a külső blokkot egy egycellás táblázatra cseréljük. Az igazítás a cella tartalmára, azaz a belső blokkra vonatkozik.

HTML

css

Külső (szélesség: 200 képpont; magasság: 200 képpont; szövegigazítás: középre; függőleges igazítás: középre; háttérszín: #ffc; )

Fő hátránya ezt a döntést, szemantikai szempontból - a táblázat használata nem rendeltetésszerű. A második hátrány az, hogy egy táblázat létrehozásához hozzá kell adni még egy elemet kültéri egység.

Az első negatívum részben visszavonható, ha a táblacímkéket div-re cseréljük, és beállítjuk a táblázat megjelenítési módját CSS-ben.

HTML

css

Külső burkoló ( kijelző : táblázat ; ) .outer ( kijelző : táblázatcella ; )

2. Igazítás párnázással

Feltéve, hogy ismerjük a belső és a külső blokkok magasságát, az igazítás a belső blokk függőleges behúzásaival állítható be a következő képlet segítségével: (H külső - H belső) / 2.

css

Külső ( magasság : 200 képpont ; ) .belső ( magasság : 100 képpont ; margó : 50 képpont 0 ; )

A megoldás hátránya mindkét blokk magasságának kötelező ismerete.

3. Igazítás a vonalmagassághoz

Ha a belső blokk legfeljebb egy sornyi szöveget foglal el, akkor használhatja a line-height tulajdonságot, és beállíthatja a külső blokk magasságával egyenlőre. Mivel a belső blokk tartalma nem kerülhet a második sorba, célszerű a white-space: nowrap és overflow: rejtett szabályokat is hozzáadni.

css

Külső ( magasság : 200 képpont ; vonalmagasság : 200 képpont ; ) .belső ( szóköz : nowrap ; túlcsordulás : rejtett ; )

Ez a módszer igazításra is használható többsoros szöveg. Ehhez a belső blokknak felül kell írnia a line-height értéket, valamint hozzá kell adnia a szabályok megjelenítését: inline-block és függőleges igazítás: közép .

css

Külső ( magasság : 200 képpont ; vonalmagasság : 200 képpont ; ) .belső ( vonalmagasság : normál ; kijelző : soron belüli blokk ; függőleges igazítás : középső ; )

Ennek a módszernek az a hátránya, hogy ismerni kell a külső blokk magasságát.

4. Igazítás „nyújtással”

Ez a módszer akkor használható, ha a belső blokk magassága ismert, a külsőé viszont nem.

Alkalmazni ez a módszer Szükségünk van:

• Állítsa a külső blokkot pozícióra: relatív , a belső blokkot pedig abszolút pozícióra: abszolút ;
• Adjunk hozzá néhány felső: 0 és alsó: 0 szabályt a belső blokkhoz, aminek eredményeként az a külső blokk teljes magasságára nyúlik;
• Állítsa a belső blokk függőleges párnázását automatikusra.

css

Külső ( pozíció : relatív ; ) . belső ( magasság : 100 képpont ; pozíció : abszolút ; felső : 0 ; alsó : 0 ; margó : auto 0 ; )

5. Igazítás negatív margó felső részéhez

Az előzőhöz hasonlóan ezt a módszert akkor alkalmazzuk, ha a külső blokk magassága ismeretlen, de a belsőé ismert.

A külső blokkot relatív pozicionálásra, a belső blokkot abszolút pozicionálásra kell beállítani. Ezután mozgassa a belső dobozt lefelé a külső doboz felső magasságának felével: 50%, és mozgassa felfelé a saját magasságának felével - felső margóval: -H _belső / 2 .

css

Külső ( pozíció : relatív ; ) .belső ( magasság : 100 képpont ; pozíció : abszolút ; felső : 50 % ; margó felső : -50 képpont ; )

Mínusz ez a módszer- ismerni kell a beltéri egység magasságát.

6. Igazítás transzformációval

A módszer akkor használható, ha a beltéri egység magassága ismeretlen. A belső dobozt le kell mozgatni a külső doboz felső magasságának felével: 50%, majd használja a transzformáció tulajdonságot, és emelje vissza a translateY(-50%) függvénnyel.

css

Külső ( pozíció : relatív ; ) .belső ( pozíció : abszolút ; felső : 50 % ; transzformáció : translateY ( -50 % ); )

7. Igazítás pszeudoelemmel

Ez a legsokoldalúbb módszer, amely akkor használható, ha mindkét blokk magassága ismeretlen.

A módszer lényege, hogy a külső blokkon belül egy 100%-os magasságú inline blokkot adunk hozzá és függőleges igazításba állítjuk. Így a hozzáadott blokk magassága megegyezik a külső blokk magasságával. A belső blokk függőlegesen igazodik a hozzáadott blokkhoz, és így a külső blokkhoz.

Annak érdekében, hogy ne sértsük meg a szemantikát, kívánatos egy soron belüli blokk hozzáadása pszeudoelemek előtt vagy után.

css

Külső :előtte (megjelenítés: inline-block; magasság: 100%; függőleges igazítás: középen; tartalom: "" ; ) .inner (megjelenítés: inline-block ; függőleges igazítás: középső ; )

Ennek a módszernek az a hátránya, hogy nem használható a beltéri egység abszolút pozicionálásával.

8. Flexboxhoz igazítás

A függőleges igazítás legmodernebb módja a Flexible Box Layout (vagy rövidítve) használata Flexbox). Lehetővé teszi az elemek elhelyezésének rugalmas szabályozását az oldalon, szinte bárhol elhelyezve azokat. A Flexbox középre igazítása nagyon egyszerű feladat.

css,

HTML

Azt hiszem, sokan közületek, akik foglalkoztak az elrendezéssel, találkoztak azzal, hogy az elemeket függőlegesen kell igazítani, és tudják, milyen nehézségek merülnek fel egy elem középre igazítása során.

Igen, a függőleges igazításhoz a CSS-ben van egy speciális függőleges igazítási tulajdonság, sok értékkel. A gyakorlatban azonban nem úgy működik, ahogyan azt várták. Próbáljuk meg ezt kitalálni.

Hasonlítsuk össze a következő megközelítéseket. Igazítás a következővel:

• asztalok,
• behúzás,
• vonalmagasság,
• nyújtás,
• negatív árrés,
• átalakítani,
• pszeudo elem
• flexbox.

Szemléltetésként tekintse meg a következő példát.

Két div elem van, az egyik be van ágyazva a másikba. Adjuk meg nekik a megfelelő osztályokat – külső és belső .

A cél az, hogy a belső elemet a külső elem közepéhez igazítsák.

Először is vegye figyelembe azt az esetet, amikor a külső és a belső blokk méretei ismert. A belső elemhez adjuk hozzá a display: inline-block, a külső elemhez pedig a text-align: center and vertical-align: middle-t.

Ne feledje, hogy az igazítás csak azokra az elemekre vonatkozik, amelyek rendelkeznek soron belüli vagy soron belüli blokk megjelenítési móddal.

Állítsuk be a blokkok méretét, valamint a háttérszíneket, hogy lássuk a szegélyeiket.

Külső (szélesség: 200px; magasság: 200px; szövegigazítás: középre; függőleges igazítás: középen; háttérszín: #ffc; ) .belső (megjelenítés: inline-block; szélesség: 100px; magasság: 100px; háttérszín : #fcc;)
A stílusok alkalmazása után látni fogjuk, hogy a belső blokk vízszintesen igazodik, de nem függőlegesen:
http://jsfiddle.net/c1bgfffq/

Miért történt ez? A helyzet az, hogy a függőleges igazítás tulajdonság befolyásolja az igazítást maga az elem, nem a tartalma(kivéve, ha táblázatcellákra alkalmazzák). Ezért ezt a tulajdonságot alkalmazva a külső elem nem adott semmit. Ezen túlmenően, ha ezt a tulajdonságot a belső elemre alkalmazzuk, akkor sem lesz semmi, mivel az inline-blokkok függőlegesen igazodnak a szomszédos blokkhoz, és esetünkben van egy soros blokk.

Számos technika létezik a probléma megoldására. Az alábbiakban mindegyiket nézzük meg közelebbről.

Igazítás asztalhoz

Az első megoldás, ami eszünkbe jut, a külső blokk lecserélése egycellás táblára. Ebben az esetben az igazítás a cella tartalmára, azaz a belső blokkra vonatkozik.

http://jsfiddle.net/c1bgfffq/1/

A megoldás nyilvánvaló hátránya, hogy szemantikai szempontból helytelen táblázatokat használni az igazításhoz. A második hátrány az, hogy egy táblázat létrehozásához hozzá kell adni egy további elemet a külső blokk köré.

Az első mínusz részben eltávolítható, ha a tábla és a td címkéket div-re cseréljük, és beállítjuk a táblázat megjelenítési módját CSS-ben.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Ennek ellenére a külső blokk továbbra is egy asztal marad az ebből fakadó összes következménnyel.

Igazítás párnázással

Ha ismert a belső és a külső blokk magassága, akkor az igazítás a belső blokk függőleges párnázatával állítható be a következő képlet segítségével: (H külső - H belső) / 2.

Külső ( magasság: 200 képpont; ) .belső ( magasság: 100 képpont; margó: 50 képpont 0; )
http://jsfiddle.net/c1bgfffq/6/

A megoldás hátránya, hogy csak korlátozott számú esetben alkalmazható, ha mindkét blokk magassága ismert.

Igazítás a vonalmagassághoz

Ha tudja, hogy a belső blokk legfeljebb egy sornyi szöveget foglalhat el, akkor használhatja a line-height tulajdonságot, és beállíthatja a külső blokk magasságával egyenlőre. Mivel a belső blokk tartalmának nem szabad a második sorba sorakoznia, javasolt a white-space: nowrap és overflow: rejtett szabályok hozzáadása is.

Külső ( magasság: 200 képpont; vonalmagasság: 200 képpont; ) .belső ( szóköz: nincs becsomagolás; túlcsordulás: rejtett; )
http://jsfiddle.net/c1bgfffq/12/

Ez a technika használható többsoros szöveg igazítására is, ha felülírja a belső blokk sormagasságának értékét, és hozzáadja a következő szabályokat: inline-block és függőleges igazítás: közép .

Külső ( magasság: 200 képpont; vonalmagasság: 200 képpont; ) .belső ( vonalmagasság: normál; kijelző: soron belüli blokk; függőleges igazítás: középső; )
http://jsfiddle.net/c1bgfffq/15/

Ennek a módszernek az a hátránya, hogy ismerni kell a külső blokk magasságát.

Nyújtás igazítás

Ez a módszer akkor használható, ha a külső blokk magassága ismeretlen, de a belsőé ismert.

Ehhez szüksége van:

1. állítsa be a relatív pozícionálást a külső blokkhoz, és az abszolút pozicionálást a belső blokkhoz;
2. adja hozzá a felső: 0 és az alsó: 0 szabályokat a belső blokkhoz, aminek eredményeként az a külső blokk teljes magasságára nyúlik;
3. állítsa az értéket auto értékre a belső blokk függőleges párnázásához.

.outer ( pozíció: relatív; ) .inner ( magasság: 100 képpont; pozíció: abszolút; felső: 0; alsó: 0; margó: auto 0; )
http://jsfiddle.net/c1bgfffq/4/

Ennek a technikának az a lényege, hogy egy kifeszített és abszolút pozicionált blokk magasságának beállítása azt eredményezi, hogy a böngésző egyenlő arányban számítja ki a függőleges kitöltést, ha az érték automatikusra van állítva.

Igazítás negatív margó felső részéhez

Ez a módszer széles körben ismertté vált, és nagyon gyakran használják. Az előzőhöz hasonlóan akkor alkalmazzák, ha a külső blokk magassága ismeretlen, de a belsőé ismert.

A külső blokkot relatív pozicionálásra, a belső blokkot abszolút pozicionálásra kell beállítani. Ezután le kell mozgatnia a belső dobozt a külső doboz felső magasságának felével: 50%, és felfelé kell mozgatnia saját magasságának felével margó-tető: -H belső / 2.

Külső ( pozíció: relatív; ) .belső ( magasság: 100 képpont; pozíció: abszolút; felső: 50%; margó-felső: -50 képpont; )
http://jsfiddle.net/c1bgfffq/13/

Ennek a módszernek az a hátránya, hogy ismerni kell a beltéri egység magasságát.

Igazítás transzformációval

Ez a módszer hasonló az előzőhöz, de akkor is alkalmazható, ha a belső blokk magassága ismeretlen. Ebben az esetben ahelyett, hogy negatív kitöltést állítana be pixelben, használhatja a transzformáció tulajdonságot, és felemeli a belső dobozt a translateY függvénnyel és -50% értékkel.

Külső ( pozíció: relatív; ) .belső ( pozíció: abszolút; felső: 50%; transzformáció: fordítsa Y(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Miért nem lehetett az előző módszerben százalékban megadni az értéket? Mivel a margin tulajdonság százalékos értékeit ehhez viszonyítva számítják ki szülő elem, az 50%-os érték a külső doboz magasságának fele lenne, és a belső dobozt a saját magasságának felével kellene megemelnünk. A transzformációs tulajdonság pontosan erre való.

A módszer hátránya, hogy nem alkalmazható, ha a beltéri egység rendelkezik abszolút pozicionálás.

Flexboxhoz igazítás

A legtöbb modern módon a függőleges igazítás a Flexible Box Layout (népszerű nevén Flexbox) használata. Ez a modul lehetővé teszi az elemek elhelyezésének rugalmas szabályozását az oldalon, szinte bárhol elhelyezve azokat. A Flexbox középre igazítása nagyon egyszerű feladat.

A külső blokkot a következőre kell állítani: flex , a belsőt pedig margóra: auto . És ez minden! Gyönyörű, nem igaz?

Külső (kijelző: hajlékony; szélesség: 200px; magasság: 200px; ) .belső (szélesség: 100px; margó: automatikus; )
http://jsfiddle.net/c1bgfffq/14/

A módszer hátránya, hogy a Flexboxot csak a modern böngészők támogatják.

Melyik utat válasszuk?

A probléma megfogalmazásából kell kiindulni:

• A szöveg függőleges igazításához jobb a függőleges kitöltés vagy a vonalmagasság tulajdonság használata.
• Abszolút pozicionált, ismert magasságú elemekhez (pl. ikonok) ideális alkalmas módon negatív margin-top tulajdonsággal.
• Bonyolultabb esetekben, amikor a blokk magassága ismeretlen, pszeudoelemet vagy transzformációs tulajdonságot kell használni.
• Nos, ha olyan szerencsés vagy, hogy nem kell támogatnia az IE régebbi verzióit, akkor természetesen a Flexbox jobb.

Az elrendezés során gyakran szükség van a szöveg függőleges igazítására egy blokkban. Ha ezt egy táblázatcellában kell megtenni, akkor a függőleges igazítási CSS tulajdonság értéke be van állítva.

De felmerül egy ésszerű kérdés, hogy meg lehet-e csinálni táblázat nélkül, anélkül, hogy az oldaljelölést felesleges címkékkel túlterhelnénk? A válasz igen, de az MSIE böngésző gyenge CSS-támogatása miatt a probléma megoldása el fog térni más általános böngészők megoldásától.

Példaként vegye figyelembe a következő részletet:

és próbálja meg függőlegesen igazítani a szöveget a doboz közepéhez és a doboz aljához.

A probléma megoldása

"Megfelelő" böngészők (beleértve az MSIE-t

Többség modern böngészők támogatja a CSS2.1-et, vagyis a megjelenítési tulajdonság táblázatcella értékét. Ez lehetőséget ad arra, hogy a szöveges blokkot táblázatcellaként jelenítsük meg, és ezzel függőlegesen igazítsuk a szöveget:

div (
kijelző:tábla-cella;
függőleges igazítás: középen;
}

div (
kijelző:tábla-cella;
függőleges igazítás: alsó;
}

Internet Explorer (a 7-es verzióig)

A szöveg blokk aljához igazításának problémájának megoldásához az MSIE-ben abszolút pozicionálást használhat (itt egy blokkba ágyazott soron belüli elemre van szükségünk):

div (
pozíció: relatív;
}
div span(
display:block;
pozíció: abszolút;
alsó: 0%;
maradt: 0%
szélesség: 100%
}

Ez a szabályrendszer működik a "helyes" böngészőkben is.

Adja meg a tulajdonságokat

div span (
display:block;
szélesség: 100%
}

opcionális, de szükség lehet rájuk, ha a függőleges szövegigazítás mellett vízszintes szövegigazítást is szeretne használni, például szövegigazítás: center ;.

A szöveg blokk közepére történő függőleges igazításához az eredeti töredéknek továbbra is bonyolultnak kell lennie - vezessünk be még egy soron belüli elemet:

Tanulmányi anyag:

• Függőleges központosítás a CSS-ben (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
• Függőleges központosítás CSS használatával (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
• Függőleges igazítás (www.cssplay.co.uk/ie/valign.html)
• vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
• Egy másik módja a függőleges igazításnak a CSS-ben (cssing.org.ua/2007/04/26/another-css-valign-method)

A CSS-ben a függőlegesen központosított elemek problémájának számos kész megoldása van. Mindegyikhez válassza ki az igazítási módot külön eset függ az elemek típusától, méretétől, elhelyezésétől és az általuk meghatározott egyéb tulajdonságoktól.

Az alábbiakban bemutatjuk az elrendezéstervezők által népszerű függőleges igazítási technikákat. Megmutatja, hogyan működnek, és melyik esetre a legalkalmasabb.

Itt van két div elem:

Mindegyik módszerrel a beltéri egység a kültéri egység közepéhez igazodik.

vonalmagasság egy sorhoz

Ha a szülő egy sornyi szöveget ölel át, és a gyermek magassága ismert, akkor a sormagasság tulajdonság alkalmazható. Az ingatlan értékének meg kell egyeznie a külső doboz magasságával. Ez csak egy sornál működik, ezért jó, ha a gyerek túlcsordulást: rejtett és szóközt: nowrap, hogy megakadályozza a sor tördelését.

A line-height=100% százalékos értéket nem fogja tudni használni, mert ebben az esetben a 100% a betűtípus magassága.

Tartály(
magasság: 300 képpont;
vonalmagasság: 300 képpont
}

Belső(
white-space: nowrap;
túlcsordulás: rejtett;
}

A módszer csak akkor alkalmazható, ha a külső blokk magassága ismert.

Függőleges igazítású táblázat

A táblázat a legjobb módja az elemek függőleges igazításának. Annak érdekében, hogy ne sértse meg a szemantikát, jobb táblázatelemeket létrehozni CSS használatával. A cellatartalom helyzetét függőleges igazítás szabályozza. Ennek a tulajdonságnak négy értéke táblázatokban működik:

alapvonal - alapértelmezés szerint;
. alsó - tartalom a cella alján;
. közép - tartalom a cella közepén;
. top – tartalom a cella tetején.

Az első példában egy különálló táblázatcella lesz a külső blokk.

Tartály(
kijelző:tábla-cella;
függőleges igazítás: középen;
}

A módszer jó, mert meghatározott magasság nélküli elemeknél működik, de bizonyos esetekben nehezíti a használatát, hogy a külső blokk, mint minden táblázatcella, a tartalmához igazítja a szélességét, és csak beállítással tudja nyújtani. a szélesség kifejezetten szélességre. Táblázat nélküli cella esetén a százalékok nem működnek megfelelően.

Ezt a hiányosságot úgy javítjuk ki, hogy a cellát a szülőben a display:table tulajdonsággal burkoljuk. Ez az elem százalékban is méretezhető. A végső kód így fog kinézni:

Külső borítás (
display:table;
}

Tartály(
kijelző:tábla-cella;
függőleges igazítás: középen;
}

Pozíció: abszolút + negatív árrés

A módszert akkor alkalmazzuk, ha a belső elem magassága ismert. Külső blokk esetén előfordulhat, hogy ismeretlen. A szülő relatív pozicionálást kap, a benne lévő gyermek pedig abszolút.

Az 50%-os felső tulajdonságérték azt eredményezi, hogy a beágyazott elem a legfelső helyen, a külső doboz közepén helyezkedik el. Továbbra is meg kell emelni egy negatív margó-tetővel saját magasságának felével, hogy pontosan a függőleges közepén álljon.

Tartály(
pozíció: relatív;
}

Belső(
magasság: 140 képpont;
pozíció: abszolút;
felső: 50%;
margó felső: -70 képpont;
}

Ennek a módszernek a hátránya, hogy ismerni kell a gyermek magasságát.

Soron belüli igazítás függőleges igazítással

A beágyazott és soron belüli blokkelemek, köztük a képek és ikonok igazítása a környező szövegben a függőleges igazítás tulajdonsággal történik. A táblázattól eltérően ebben az esetben a specifikációban megadott értékeinek teljes halmaza működik.

Tekintettel a szülő magasságára, ez a tulajdonság használható többsoros szöveg központosítására.

A külső blokknál egy vonal központosítása van előírva.

Tartály(
magasság: 140 képpont;
vonalmagasság: 140 képpont;
}

A belső blokk vonalmagasságának értéke normálra vagy a kívánt értékre kerül felülírásra. Megadja továbbá a függőleges igazítást: középső és az inline-block típusba való átalakítást - megjelenítés: inline-block.

Belső(
kijelző: inline-block
vonalmagasság: normál
függőleges igazítás: középen;
}

Ennek a módszernek az a hátránya, hogy ismerni kell a szülő magasságát.

Igazítás transzformációval

A transzformációs tulajdonság translateY függvénye lehetővé teszi egy ismeretlen magasságú belső doboz középre állítását. Ehhez a szülőt viszonylag, a gyereket pedig abszolút pozícionálni kell.

Az 50%-os felső tulajdonság leengedi a belső dobozt úgy, hogy a felső éle a szülő közepén legyen. A translateY érték: -50% megemeli az elemet saját magasságának felével, és így igazítja a dobozok függőleges középpontját.

Tartály(
pozíció: relatív;
}

Belső(
pozíció: abszolút;
felső: 50%;
transzformáció: translateY(-50%);
}

A vétel hátránya, hogy az IE böngésző korlátozottan támogatja a transzformációs funkciókat.

Igazítás pszeudoelemen keresztül

A módszer akkor működik, ha sem az első, sem a második blokk magassága ismeretlen. Egy soron belüli pszeudoelem soron belüli blokk kerül hozzáadásra a szülő belsejébe az előtt vagy után. A hozzáadott elem magasságának meg kell egyeznie a szülő magasságával - magasság: 100%. A tartalom függőleges igazítása függőleges igazítással van beállítva: közép.

Függőleges igazítás: középre igazítja a belső blokkot ehhez a pszeudoelemhez képest. Mivel a szülő és a gyermek azonos magasságú, a belső elem, bár függőlegesen igazodik a pszeudoelemhez, a külső doboz közepén is van.

Tároló:előtte (
tartalom: "";
magasság: 100%;
függőleges igazítás: középen;
kijelző: inline-block
}

Belső(
kijelző: inline-block
függőleges igazítás: középen;
}

Univerzális módszer. Nem működik, ha a belső blokk abszolút pozicionálásra van állítva.

Flexbox

Az elemek függőleges igazításának legújabb és legegyszerűbb módja. A Flexbox lehetővé teszi a weboldal elemeinek tetszőleges elrendezését. Egy blokk középre állításához állítsa be a szülőt a következőre: flex, a gyermeket pedig margóra: auto.

Tartály(
display:flex;
szélesség: 320 képpont
magasság: 140 képpont;
}

Belső(
szélesség: 120 képpont
margó: auto;
}

A Flexbox csak a modern böngészőkben működik.

A módszer megválasztása

Az, hogy melyik függőleges igazítási technikát alkalmazzuk, a feladattól és az adott esetben fennálló korlátoktól függ.

Az elemek magassága ismeretlen

Ebben a helyzetben a négy univerzális módszer egyikét használhatja:

1. Táblázat. A szülő egy táblázatcella, amelyet HTML-ben vagy a display-table/display-cell segítségével hoztak létre. Ennek a szülőelemnek függőleges igazítása van: közép.

2. Ál-elem. A külső blokkhoz egy soron belüli blokk pszeudoelem jön létre szélesség=100% és függőleges igazítás: közép. A gyermek megjelenítést kap: inline-blokk és függőleges igazítás: középen. A módszer nem csak akkor működik, ha a belső blokk abszolút pozicionálást kap.

3. Átalakítás. A szülő pozíciót kap: rokon. A gyermek pozíciót kap: abszolút, felső: 50% és transzformáció: translateY(-50%);

4 Flexbox. A külső blokk megjelenítése: flex, a belső blokk margóra van állítva: auto.

Csak a gyermek magassága ismert

A külső blokk viszonylagosan helyezkedik el; a belső elem abszolút pozicionálást kap, felső: 50%, és a magasság felével egyenlő margó-felső.

Egy sor blokkonként ismert magassággal

A külső doboz a line-height tulajdonságra van állítva, amelynek értéke megegyezik a magasságával.

A külső blokk magassága ismert, de a belső elem nem.

A szülő a magasságával megegyező vonalmagasságot kap. A gyermek vonalmagassága újradefiniálva normál vagy tetszőleges értékre, és megjelenítést kap: inline-block és függőleges igazítás: középen.

A különféle elemek – például egy webhelyen vagy oldalon – igazítása kezdetben valakire vonatkozik kihívást jelentő feladat amely elmozdítja a szöveg függőleges igazítását. Ironikus módon az egyik legtöbb nehéz utakat CSS használat a tartalomközpontosítás. A tartalom vízszintes központosítása bizonyos időpontokban viszonylag egyszerű. A tartalom függőleges központosítása szinte mindig nehéz. Központosítás különféle elem, amelyet függőlegesen kell igazítani a CSS-hez. Ez minden bizonnyal nagyon gyakran feltett kérdés, amely problémákat okoz a tervezőknek és a webmestereknek. A függőleges központosítás végrehajtására azonban számos módszer létezik, és mindegyik meglehetősen könnyen használható.

Ha valaha is kipróbáltad, akkor ez trükkös, különösen, ha el szeretnéd kerülni a táblázatok használatát. Szerencsére segélykiáltásunkat meghallgatták, és a probléma megoldására a CSS-arzenálhoz hozzáadott egyik új fegyver a flex box elrendezés néven ismert elrendezés. Amint azt néhány pillanat múlva megtudhatja, néhány igazán nagyszerű funkciót kínál az összetett elrendezések egyszerűsítésére. Ennek a nagyszerű funkciónak egy része lehetővé teszi a tartalom függőleges és vízszintes középre állítását is, amiről ebben az oktatóanyagban kitérünk. Ezt bizonyos mértékig kitöméssel is megteheti, de előfordulhat, hogy az elrendezést kisebb képernyőkön is elhelyezheti. Egyéni CSS-osztály hozzáadásával a stíluslaphoz azt jelenti, hogy másodpercek alatt függőlegesen középre állíthatja a tartalmat.

Vízszintes igazítás Meghatározza, hogy a bekezdés bal és jobb széle hogyan illeszkedik a bal és a jobb él között szövegmező. A függőleges igazítás határozza meg a karakter függőleges elhelyezését a szövegmezőben. Hiány jó utakat A CSS elemeinek függőleges központosítása jóformán egész létezése során rossz hírnévnek számított.

Első módszer vonalmagassággal

Az első módszer egyszerű és kissé banális, ahol vannak olyan hátrányok, amelyek korlátozzák az alkalmazást. Egy webhely html-oldalainak kódolásakor a szöveges tartalom sorköze valószínűleg egyike azon attribútumoknak, amelyeket általában alapértelmezetten hagynak. Általában magának a vonalnak a magasságát kell beállítanunk, ami hasonló magassággal jár a blokkhoz, ahol használják vonalmagasság ingatlan.

css

Constutesim_first(
keret: 2px tömör #bf1515;
magasság: 175 képpont;
}
.constutesim_first > p(
sor magassága: 175 képpont;
margó:0;
text-align:center;
párnázás: 0;
betűméret: 17 képpont;
szín: #3152a0;
font-család: Tahoma;
betűsúly: félkövér;
}

Ezenkívül azonnal láthatja, hogyan fog kinézni minden a valóságban.

Hasonló módon megvalósítható a kép beállításának módja, amely középre és feltétel nélkül függőleges lesz. Itt csak egy tulajdonságot kell regisztrálni, függőleges-igazítás: középső; amely a kép megjelenítéséért felelős.

css

Második variáció(
szegély: 2px folyamatos piros;
vonalmagasság: 158 képpont;
}

második variáció div(
text-align:center;
}
.second-variation img (
függőleges igazítás: középen;
keret: 0px tömör #3a3838;
}

Képpillanatfelvételeket valósítunk meg középen és függőlegesen.

Igazítás a pozíció tulajdonsághoz

Ez valószínűleg a legismertebb módszer, de az alkalmazás szempontjából a leggyakoribb CSS használatával. De itt hozzá kell tenni, hogy ez sem ideális, és ennek a módszernek is megvannak a maga apró árnyalatai, amelyek az elem középpontjához kapcsolódnak, hogy ha százalékban van beállítva, akkor a bal oldalra lesz középre állítva. felső oldalon, magában a blogban.

css

Competaird-opció (
keret: 2px tömör #d40e0e;
magasság: 162 képpont;
pozíció: relatív;
}
.competaird-option div (
pozíció: abszolút;
felső: 50%;
maradt: 50%
magasság: 28%;
szélesség: 49%
árrés: -2% 0 0 -25%;
keret: 2px tömör #4a4848;
}

A sorköz vagy sormagasság a renderelt szöveg sorai közötti függőleges magasság HTML oldal. Ezt a távolságértéket szinte mindig a megfelelő értékre állítja be a böngésző vagy a megjelenítő motor. Ez az érték általában a megjelenített oldal betűtípusától és egyéb tényezőktől függ.

Igazítás a táblázat tulajdonságához

Ennél a módszernél a bevált ill régi módszer, ahol az elemeket egy táblázattá alakítjuk át, amelyben a cellák találhatók. Ami a table nevű címkét illeti, itt nem fogjuk használni, itt teljesen mást állítunk be css tulajdonság, is display: table;, display: table-cell;. Ha az IE legrégebbi verzióiról beszélünk, akkor az adatok egyszerűen nem jelennek meg itt. Remélem frissítette a böngészőjét, mert már nem releváns, és szinte minden nem jelenik meg megfelelően.

Chervert-variáció (
keret: 2px tömör #c30b0b;
magasság: 173 képpont;
display:table;
szélesség: 100%
betűméret: 17 képpont;
betűsúly: félkövér;
szín: #3945a0;
}

Chervert-változat div(
kijelző:tábla-cella;
függőleges igazítás: középen;
text-align:center;
}

Először is nézzük meg, mi az alapértelmezett, amelyet a legtöbb böngésző használ. A legtöbb modern nappali böngészőben sorköz.

Igazítás a flex tulajdonsággal

Itt egy eredetibb változathoz érkezünk, amelynek megvannak a maga tulajdonságai, amelyek ritkán találhatók meg egy internetes forrás elrendezésében. De még mindig használják őket, hogy bizonyos esetekben hasznosak. Ez határozza meg az elsődleges tengelyt, így az irányított flex elemek meghatározása a floppy tárolóba kerül.

css

Változat-vízszintes (
keret: 2px tömör #d20c0c;
magasság: 147 képpont;
display:flex;
align-ites: center;
indokol-tartalom: center;
betűméret: 18 képpont;
betűsúly: félkövér;
szín: #49518c;
}

A vonalmagasság értékét ugyanúgy megadhatja, mint bármely más méretet a css-ben, akár számként, pixelméretként vagy százalékként.

Igazítás a transzformációs tulajdonsághoz

És most elérkeztünk a legszélsőségesebb módszerhez, de nem a legújabb alkalmazáshoz a webdizájn használatában. Itt minden egyszerű, függőlegesen kell mozognia adott elem a szükséges értékre. Ingatlan átalakítani, azon átalakítások listája, amelyeket a telepítő alkalmaz a csomag telepítésekor. A beállító a tulajdonságban megadott sorrendben alkalmazza a transzformációkat.

css

függőleges-medilpasudsa (
keret: 2px tömör #e00a0a;
magasság: 158 képpont;
betűméret: 19 képpont;
betűsúly: félkövér;
szín: #353c71;
}
.vertical-medilpasudsa > div(
pozíció: relatív;
felső: 50%;
transzformáció: translateY(-50%);
text-align:center;
}

Ha számként adja meg az értékeket, akkor az az aktuális betűméreten fog alapulni. A sormagasság vagy a sorok közötti térköz kiszámításához az aktuális betűméretet megszorozza a megadott számmal.

Ha vízszintesen szeretné középre helyezni a karaktereket egy elemben, akkor a text-align: center parancsot kell használnia. Az egyik lehetőség, ha függőlegesen szeretné középre helyezni, és rögzített fejléc-lábléce és egy sor szövege van, állítsa be a sor magasságát a lábléc magasságával megegyezőre.

Ha középre kell helyeznie a szöveget egy elemen belül, például div, fejléc vagy bekezdés, használhatja text-align tulajdonság CSS.

A szövegigazításnak számos érvényes tulajdonsága van:

központ: A textúra középen van;
bal: A tartály bal oldalához igazodik;
jobb: A tartály jobb oldalához igazítva
indokolni: Kénytelen igazodni a tartály bal és jobb széléhez, kivéve a szélső vonalakat;
mindent megindokolni: A legkülső karakterláncot kényszeríti a karakterek igazolására;
Rajt: Ugyanaz, mint a bal oldalon, csak akkor, ha az irány balról jobbra irányul. De helyes lesz, ha kezdetben beállítja a szöveg irányának irányát, amely jobbról balra fog történni;
vége: A kezdet ellentéte;
megfelelő szülő: Hasonló az örökléshez, kivéve, hogy a kezdet és a vége a szülőelemhez viszonyított;

Ezekkel a tulajdonságokkal igazíthatja a szöveget egy szülő vagy burkoló div-en belül. Ha vízszintesen szeretné középre helyezni a szöveget egy elemben, akkor a text-align: center parancsot kell használnia.

Az egyik lehetőség, ha függőlegesen szeretné középre helyezni, ha rögzített fejléc-lábléce és egy sor szövege van, állítsa be a sor magasságát a lábléc magasságával megegyezőre.