A CSS-ben a függőleges igazítás tulajdonság szabályozza a sorközi szintű elemek vagy táblázatcellák függőleges igazítását az őket tartalmazó elemen belül. Olyan elemekre vonatkozik, amelyek egy szövegsor részét képezik, vagy soron belüli blokkként vagy táblázatcellaként jelennek meg.

A „függőleges igazítás” tulajdonságot általában olyan sorközi elemekhez használják, mint a képek, szöveg vagy a szövegsoron belüli sorközi blokkelemek. Nem vonatkozik közvetlenül a blokk szintű elemekre; azonban használhat olyan technikákat, mint a flexbox vagy a pozicionálás a függőleges igazításhoz.

Szintaxis:

Íme a függőleges igazítás tulajdonság alapvető szintaxisa:

 selector { vertical-align: value; }  

Az „érték” a következő lehetőségek egyike lehet:

Alapállapot: Az elem alapvonalát a szülőelem alapvonalához igazítja. Ez a legtöbb elem alapértelmezett értéke. Alatti: Igazítja az elem alapvonalát a szülőelem betűtípusának alsó indexének alapvonalához. Szuper: Az elem alapvonalát a szülőelem betűtípusának felső indexéhez igazítja. Felső: Igazítsa az elem tetejét a vonalon belüli legmagasabb elem tetejéhez. Szöveg felső: Az elem tetejét a szülőelem betűtípusának tetejéhez igazítja. Középső: Függőlegesen középre állítja az elemet a szülőelemhez képest. Alsó: Igazítsa az elem alját a vonalon belüli legalacsonyabb elem aljához. Alsó szöveg: Igazítsa az elem alját a szülőelem betűtípusának aljához. Százalék: Az elem függőlegesen igazodik a vonalmagasság meghatározott százalékához. Például függőleges igazítás: 50% az elemet függőlegesen középre állítja a szülőelemen belül.

MEGJEGYZÉS: Ne feledje, hogy a „függőleges igazítás” sajátos viselkedést mutat az elem típusától és a használat kontextusától függően, ezért előfordulhat, hogy hatásai nem mindig egyértelműek. Különösen hasznos a szövegközi elemek szöveghez vagy más szövegközi elemekhez való igazításához.

Példák

Íme néhány további részlet és példa a CSS „vertikális igazítás” tulajdonságához:

1. Alapvonal igazítás:

A függőleges igazítási alapvonal érték igazítja az elem alapvonalát a szülőelem alapvonalához. Ez az alapértelmezett viselkedés a legtöbb soros szintű elemnél.

Alapvonal Egyéb szöveg

2. Al- és felső index:

A függőleges igazítás: Az alérték igazítja az elem alapvonalát a szülőelem betűtípusának alsó indexének alapvonalához, így alsó indexként jelenik meg. Másrészről, függőleges igazítás: A Szuper igazítja az elem alapvonalát a szülőelem betűtípusának felső indexének alapvonalához.

H ₂ O a víz. x ² + és ² = r ²

3. Felső és alsó igazítás:

A függőleges igazítás: A felső érték az elem tetejét a soron belüli legmagasabb elem tetejéhez igazítja. Hasonlóképpen, függőleges igazítás: Az alsó az elem alját igazítja a vonalon belüli legalacsonyabb elem aljához.

Felülre igazítva Alulra igazítva

4. Középre igazítás:

A függőleges igazítás: A középső érték függőlegesen középre helyezi az elemet a szülőelemhez képest. Ezt gyakran használják az ikonok vagy képek szövegen belüli központosítására.

Ez az ikon függőlegesen középen helyezkedik el

5. Szöveg felső és alsó igazítása:

A függőleges igazítás: Text-top érték igazítja az elem tetejét a szülőelem betűtípusának tetejéhez és függőleges igazítás: A Text-bottom az elem alját a szülőelem betűtípusának aljához igazítja.

Szöveg felülre igazítva Szöveg alulra igazítva

6. Százalékos igazítás:

A százalékos érték használata függőleges igazítással lehetővé teszi az elem függőleges igazítását egy adott vonalmagasság százalékában. Például függőleges igazítás: 50% középre állítja az elemet a vonalmagasság felére.

Függőlegesen középre

7. Blokkszintű elemek függőleges központosítása:

Ha függőlegesen középre szeretne helyezni egy blokkszintű elemet a szülőjében, használhatja a flexbox- vagy rácselrendezést.

 Flexbox example: html Vertically Centered css .parent { display: flex; justify-content: center; align-items: center; height: 200px; /* Set the desired container height */ }  

8. Függőleges központosítás ismeretlen elemmagassággal:

Ha nem tudja a függőlegesen középre helyezni kívánt elem magasságát, használhatja a pozíció és az átalakítás kombinációját:

 html Vertically Centered (Unknown Height) CSS .parent { position: relative; height: 200px; /* Set the desired container height */ } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }  

9. Függőleges központosítás többsoros szöveggel:

Ha függőlegesen szeretné középre helyezni a többsoros szöveget egy tárolón belül, használhatja a flexbox és egy pszeudoelem kombinációját:

 html Multi-line <br>Vertically Centered Text CSS .parent { display: flex; align-items: center; height: 200px; /* Set the desired container height */ } .child { flex: 1; text-align: center; } .child::before { content: &apos;&apos;; display: inline-block; vertical-align: middle; height: 100%; }  

10. Képek függőleges központosítása egy tárolóban, különböző képarányokkal:

Ha különböző képarányú képeket szeretne egy tárolón belül középre helyezni, használhatja a flexbox és az objektum-illesztés kombinációját:

HTML:

 <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 1"> <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 2">  

CSS:

 .parent { display: flex; align-items: center; justify-content: center; height: 200px; /* Set the desired container height */ } img { object-fit: contain; max-height: 100%; }  

11. A függőleges igazítás és a vonalmagasság kombinálása:

A függőleges igazítás tulajdonságot kombinálhatja a vonalmagasság tulajdonsággal a precízebb függőleges igazítás érdekében, különösen nagyobb betűméretek esetén.

 .element { font-size: 24px; line-height: 1.5; vertical-align: middle; }  

12. A kijelző tulajdonság használata az igazításhoz:

Míg a függőleges igazítás elsősorban soron belüli elemekkel működik, a megjelenítési tulajdonság megváltoztatásával a blokkszintű elemek függőleges igazítását érheti el adott kontextusban.

 .container { display: table-cell; vertical-align: middle; }  

13. Függőleges igazítás a táblázatokban:

A függőleges igazítás tulajdonságot gyakran használják táblázatcellákban ( ) a cellákon belüli tartalom igazításának szabályozásához.

 td { vertical-align: middle; }  

14. Soron belüli blokk elemek igazítása:

Függőleges igazítással igazíthatja a soron belüli blokkelemeket egy szövegsorban, például ikonokat a szöveg mellé.

 <span>&#x2B50;</span> Star Rating .icon { vertical-align: middle; font-size: 24px; }  

Ez csak néhány példa a függőleges igazítás kezelésére különböző forgatókönyvekben. Az Ön konkrét elrendezésétől és követelményeitől függően előfordulhat, hogy ezeket a technikákat adaptálnia vagy kombinálnia kell a kívánt eredmények elérése érdekében. A CSS különféle eszközöket biztosít a függőleges igazítás hatékony kezeléséhez különféle kontextusokban.

Ne feledje, hogy bár a függőleges igazítási tulajdonságnak van használata, átfogóbb megoldások léteznek minden igazítási forgatókönyvre, különösen a blokkszintű elemekre. Bonyolultabb elrendezések és igazítási követelmények esetén javasolt a modern CSS elrendezési technikák, mint például a Flexbox, CSS Grid, vagy akár a CSS pozícióértékek (például abszolút és relatív) feltárása a kívánt eredmények hatékonyabb és kiszámíthatóbb elérése érdekében.

Ne feledje, hogy a „függőleges igazítás” csak a sorközi szintű elemekre vagy táblázatcellákra vonatkozik. Használjon olyan technikákat, mint a flexbox, a rács elrendezés vagy a pozicionálás a blokkszintű elemek függőleges igazításához.

Még néhány példa

 table, th, td{ border: 2px solid red; border-collapse: collapse; font-size: 20px; } #super{ vertical-align: super; } #sub{ vertical-align: sub; } <table class="table"> <td>baseline</td> <td>middle</td> <td>bottom</td> <td>top</td> <td>Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. </td> </table> <h2> Use of super and sub values </h2> <h3>Using super value: x<span id="super">2</span>+ y<span id="super">2</span> = r<span id="super">2</span></h3> <h3> Chemical formula of Water by using sub value: H<span id="sub">2</span>O</h3>  

Kimenet

Most van egy másik példa, amelyben a szöveget a képhez igazítjuk.

Példa

 div{ font-size: 20px; border: 2px solid red; } img{ width:150px; height: 100px; } img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp"> image with a default alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-bottom alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a middle alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-top alignment.  

Kimenet

A függőleges igazítás előnyei a CSS-ben

Könnyen használható beépített elemekhez: A függőleges igazítás tulajdonság egyszerűen használható elemek, például képek, ikonok vagy szövegek soron belüli vagy más elemeken belüli igazításához. Széles böngésző támogatás: A függőleges igazítási tulajdonság jó böngészőtámogatással rendelkezik, és széles körben támogatott a különböző böngészőkben. Több igazítási lehetőség: Különféle igazítási lehetőségeket kínál, mint például alapvonal, középső, felső, alsó, szöveg felső, alsó, alsó és felső index, így a fejlesztők rugalmasságot biztosítanak az elemek igényeik szerinti igazításában. Érzékeny igazítás: Használható reszponzív tervezésben a függőleges igazításhoz a tartály mérete vagy a rendelkezésre álló hely alapján. A beépített elemek egyszerűsége: Kis elemek, például ikonok vagy képek szövegsoron belüli igazításához a függőleges igazítási tulajdonság viszonylag egyszerű megoldást kínál, anélkül, hogy bonyolult elrendezési technikákat igényelne. Finomhangolás: A tulajdonság lehetővé teszi az elemek függőleges helyzetének finomhangolását, ami hasznos lehet konkrét tervezési célok eléréséhez. Konzisztencia a táblázat celláival: A táblázatokkal összefüggésben a függőleges igazítás tulajdonság szabályozza a tartalom igazítását a táblázatcellákon belül. Ez segíthet megőrizni a következetességet a táblázatalapú elrendezések között. Szöveggel kombinálva: Hatékonyan igazítja az elemeket a szöveges tartalomhoz, például az ikonokat vagy a sorközi címkéket a szomszédos szöveghez igazítja. A képarányok megtartása: A képek vagy ikonok szövegsoron belüli igazítása során a függőleges igazítás segíthet megőrizni ezeknek az elemeknek a képarányát, különösen megfelelő betűmérettel és sormagassággal kombinálva. Gyors igazítási javítások: Ha a függőleges igazítási problémák gyors javítására van szüksége, különösen vegyes tartalmú forgatókönyvek esetén, a függőleges igazítás gyors megoldást jelenthet anélkül, hogy kiterjedt elrendezés-átalakításra lenne szükség. CSS e-mail stílus: A HTML e-mailekben, ahol az összetett elrendezéseket jobban támogatni kell, a függőleges igazítás hasznos lehet az elemek alapvető függőleges igazításában anélkül, hogy külső stíluslapokra vagy összetett technikákra támaszkodna. Kompatibilis a kijelzővel: inline-block: A függőleges igazítás tulajdonság kompatibilis az inline-block elemekkel, lehetővé téve az ilyen elemek egyszerű függőleges igazítását egy vonalon belül. A konzisztencia megőrzése: A táblázatos adatok részét képező vagy a különböző sorokban vagy oszlopokban lévő hasonló elemekhez igazodó elemek esetében a függőleges igazítás segíthet megőrizni a vizuális konzisztenciát. Böngésző kompatibilitás: Ellentétben néhány újabb CSS-technikával, a függőleges igazítás már régóta része a CSS-nek, és jó böngészők közötti kompatibilitást élvez.

A függőleges igazítás hátrányai a CSS-ben

Inline elemekre korlátozva: A függőleges igazítás tulajdonság legjelentősebb korlátja, hogy csak sorközi szintű elemekre vagy táblázatcellákra működik. Nem vonatkozik közvetlenül a blokk szintű elemekre. Ez nehezebbé teheti a függőleges igazítást nagyobb elemek vagy összetett elrendezések esetén. Inkonzisztens viselkedés: A függőleges igazítás bonyolult és inkonzisztens lehet, különösen eltérő betűméretek, sormagasságok és beágyazott elemek esetén. Ugyanaz a függőleges igazítási érték a kontextustól függően eltérő eredményeket eredményezhet. Böngésző furcsaságok: Előfordulhat, hogy egyes régebbi böngészők ellentmondásos értelmezésekkel vagy furcsaságokkal rendelkeznek a függőleges igazítás tulajdonsággal kapcsolatban, ami váratlan eredményekhez vezethet. Ez a probléma azonban javult a modern böngészők fejlődésével. Korlátozott szabályozás a térköz felett: A függőleges igazítás tulajdonság elsősorban az elemek függőleges igazításával foglalkozik, de csak kis mértékben szabályozza az elemek közötti távolságot. A térköz módosítása gyakran további CSS- vagy HTML-módosításokat igényel. Flexbox és Grid, mint alternatívák: A bonyolultabb elrendezési követelmények és a blokkszintű elemek függőleges igazítása érdekében a fejlesztők gyakran a Flexboxra vagy a CSS Gridre hagyatkoznak, amelyek robusztusabb és kiszámíthatóbb megoldásokat kínálnak. Nem alkalmas teljes központosításra: Míg a függőleges igazítás hasznos a soron belüli elemek függőleges igazítására, alkalmas a blokkszintű elemek teljes központosítására (vízszintesen és függőlegesen), további CSS-technikákkal. Félrevezető név: A „vertikális igazítás” név félrevezető lehet, mert nem igazítja az elemet függőlegesen a fejlesztők által gyakran elvárt módon. Ehelyett az elem tartalmának a sordobozán belüli igazítását szabályozza. Bonyolultság különböző betűtípusokkal: A függőleges igazítás viselkedése megjósolhatatlan lehet, ha különböző betűméretű és sormagasságú elemekkel foglalkozunk. Ez kihívást jelenthet a következetes függőleges igazításhoz. Összetett elrendezésekre korlátozott: Nem alkalmas összetett elrendezésekhez vagy forgatókönyvekhez, ahol függőlegesen kell igazítania a nagyobb, blokkszintű elemeket egy szülőtárolón belül. Böngészők közötti kompatibilitás: Míg a modern böngészők jobban támogatják a függőleges igazítást, a régebbi böngészők továbbra is következetlenségeket vagy váratlan viselkedést mutathatnak. Alternatív technikák: A modern CSS elrendezési technikák, mint például a Flexbox és a CSS Grid, hatékonyabb és kiszámíthatóbb módszereket kínálnak az összetett elrendezési követelmények kezelésére, beleértve a beágyazott és blokkszintű elemek függőleges igazítását. Kisegítő lehetőségek: Előfordulhat, hogy a függőleges igazítás használata az elrendezéshez nem a legkönnyebben elérhető megközelítés, mivel zavarhatja a képernyőolvasókat és más segítő technológiákat. A szemantikus HTML és a megfelelő CSS technikák gyakran jobb választás a kisegítő lehetőségekhez. Hibakeresési kihívások: A függőleges igazítással kapcsolatos váratlan viselkedés vagy igazítási problémák hibakeresése néha trükkös lehet, különösen, ha beágyazott elemekkel és változó betűmérettel foglalkozik. A webes elrendezés fejlődése: Ahogy a webfejlesztési környezet fejlődik, az olyan új elrendezési technikák, mint a CSS Grid Layout és a Flexbox modernebb és átfogóbb megoldásokat kínálnak az elrendezési kihívásokra, így a függőleges igazítás sok esetben kevésbé releváns.

Összességében, bár a függőleges igazítási tulajdonság hasznos a soron belüli elemek vagy táblázatcellák szövegsoron belüli igazításához, a fejlesztőknek gyakran más CSS-technikákra van szükségük a fejlettebb elrendezési és pozicionálási követelményekhez, különösen blokkszintű elemek vagy összetett elrendezések esetén. A CSS Flexbox és a CSS Grid hatékony alternatívák a szélesebb igazítás és pozicionálás szabályozásához.

Következtetés

A függőleges igazítás tulajdonság hasznos a szöveg- vagy táblázatcellákon belüli sorközi elemek igazításához. Ennek azonban vannak korlátai, és nehéz lehet hatékonyan használni összetett elrendezésekhez vagy blokkszintű elemekhez. A fejlesztőknek fontolóra kell venniük a modern CSS-elrendezési technikákat, amelyek nagyobb irányítást és rugalmasságot biztosítanak az igazítás és pozicionálás terén.