Webes elemek elhelyezése a CSS függőleges igazítással

Google kereső









Látvány
Leírás






Erdő

Lorem ipsum dolor sit amet.






óceán

Lorem ipsum dolor sit amet.

A HTML kód fent egy egyszerű weboldalt hoz létre, amely négy elemet jelenít meg: linkelt szöveget, képet, beágyazott videót és táblázatot. A böngészőben így kell kinéznie:

A szöveg függőleges igazítása

Alapértelmezés szerint a legtöbb szövegelem (például címsor,

, és

Néhány szövegelem azonban, mint pl és címke soron belüli. Ennek eredményeként támogatják a függőleges igazítási tulajdonságot. A szöveg függőleges igazításához egyszerűen rendelje hozzá a megfelelő értéket a CSS függőleges igazítási tulajdonságához.

A felső érték függőleges igazítása a szövegen

a {
 függőleges igazítás: felső;
}

Hozzátéve a CSS kód felett az alap HTML dokumentumhoz igazítja a tetejét címkézze meg a szöveget a sorban lévő legmagasabb elem tetejével. A következő frissített kijelző gyártása:

Százalékos érték használata szövegen

a {
 függőleges igazítás: -50%;
}

A fenti CSS a szövegelemet olyan pozícióba igazítja, amely 50%-kal a szülőelem alapvonala alatt van. A következő kimenetet állítja elő a böngészőben:

Amint a fenti képen látható, a szöveges elem a kép- és videóelemek alatt foglal helyet, amelyek ugyanabban a sorban vannak. Ha ezt az elemet az alapvonalra vagy fölé kívánja helyezni, használjon pozitív százalékértéket.

A hossz érték használata szövegen

a {
 függőleges igazítás: 90 képpont;
}

A fenti kód a szövegelem alapvonalát 90 képponttal a szülőelem alapvonala fölé igazítja. Ez a következő kimenetet hozza létre a böngészőben:

A képek függőleges igazítása

A tag egy beépített elem, amellyel a CSS függőleges igazítási tulajdonsága jól működik.

A függőleges igazítású szuperérték használata a képeken

img {
 függőleges igazítás: szuper;
}

A fenti kód a képet a szülőelem felső indexének alapvonalára helyezi. Ez az alapvonal feletti pozíciót jelenti, amint az a következő kimeneten látható:

A függőleges igazítású százalékos érték használata a képeken

img {
 függőleges igazítás: 25%;
}

A fenti kód a képelem alapvonalát 25%-kal a szülőelem alapvonala fölé igazítja. Ez a szuperérték következő tükörhatását hozza létre:

A függőleges igazítású hosszérték használata a képeken

img {
 függőleges igazítás: 5 képpont;
}

A fenti kód a képelem alapvonalát 5 képponttal a szülőelem alapvonala fölé igazítja. Ez a szuper és a 25%-os értékhez hasonló hatást eredményez:

A beágyazott média, például a videók és az iframe-ek soron belüli HTML-elemek. Ezért a CSS függőleges igazítási tulajdonsága remekül működik velük.

A függőleges igazítású szuperérték használata videón

videó {
 függőleges igazítás: al;
}

A fenti kód a videót a szülőelem alsó indexének alapvonalára helyezi. Ez az alapvonal alatti pozíciót jelenti, amint az a következő kimeneten látható:

A függőleges igazítású százalékérték használata videón

videó {
 függőleges igazítás: -25%;
}

A fenti kód a videoelem alapvonalát 25%-kal a szülőelem alapvonala alá igazítja. Ez az alérték következő tükörhatását hozza létre:

A függőleges igazítású hossz érték használata videón

videó {
 függőleges igazítás: -5 képpont;
}

A fenti kód a képelem alapvonalát 5 képponttal a szülőelem alapvonala alá igazítja. Ez olyan hatást eredményez, mint a sub és -25% értékek:

Az elemek függőleges igazítása a táblázatban

A függőleges igazítás tulajdonság használata táblázattal kissé körülményes, mivel a táblázat egy blokkelem. Azonban a

A függőleges igazítás felső értékének használata a táblázatadatokon

td {
 magasság: 40px;
 függőleges igazítás: felső;
}

A fenti kód 40 képpont magasságot ad a táblázat minden cellájához. Ezután az egyes cellákban lévő adatokat az egyes sorok tetejéhez igazítja. Ez a következő kimenetet eredményezi a böngészőben:

A függőleges igazítású középső érték használata a táblázatadatokon

td {
 magasság: 40px;
 függőleges igazítás: középen;
}

A fenti kódban található függőleges igazítás középső értéke függőlegesen középre helyezi az adatokat az egyes cellákon belül. A következő kimenetet állítja elő a böngészőben:

A függőleges igazítású alsó érték használata a táblázatadatokon

td {
 magasság: 40px;
 függőleges igazítás: alsó;
}

A fenti kód az egyes cellákban lévő adatokat az egyes sorok aljához igazítja. A következő kimenetet állítja elő a böngészőben:

Most már egymáshoz igazíthatja az elemeket a weboldalán

Mostantól a CSS függőleges igazítási tulajdonságát számos különböző soron belüli elemmel használhatja, beleértve a szöveget, a beágyazott adathordozókat és a táblázatadatokat. Az általános szabály az, hogy a függőleges igazítás tulajdonság csak beágyazott és soron belüli blokkelemeken működik.

Ezt a tulajdonságot azonban használhatja blokkelemeken is, csak először át kell alakítani őket soron belüli vagy inline-blokk elemekké. Ne feledje, hogy a függőleges igazítást kombinálhatja más igazítási tulajdonságokkal, például a szövegigazítással.

A szerzőről

Kadeisha Kean (52 cikk megjelent)

Kadeisha Kean Full-stack szoftverfejlesztő és műszaki/technológiai író. Megvan az a képessége, hogy leegyszerűsítse a legbonyolultabb technológiai fogalmakat; olyan anyagok gyártása, amelyek könnyen megérthetők minden technológiai kezdő számára. Szenvedélye az írás, az érdekes szoftverek fejlesztése és a világutazás (dokumentumfilmeken keresztül).

Továbbiak Kadeisha Keantől