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:
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:
Alapvonal Egyéb szöveg
2. Al- és felső index:
H2O a víz. x2+ és2= r2
3. Felső és alsó igazítás:
Felülre igazítva Alulra igazítva
4. Középre igazítás:
Ez az ikon függőlegesen középen helyezkedik el
5. Szöveg felső és alsó igazítása:
Szöveg felülre igazítva Szöveg alulra igazítva
java véletlen számot generál
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: ''; 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 (
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>⭐</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>Tesztelje most
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.Tesztelje most
Kimenet
A függőleges igazítás előnyei a CSS-ben
A függőleges igazítás hátrányai a CSS-ben
Ö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.