V CSS vlastnost vertical-align řídí svislé zarovnání prvků na úrovni řádku nebo buněk tabulky v rámci prvku, který je obsahuje. Vztahuje se na prvky, které jsou součástí řádku textu nebo jsou zobrazeny jako vložený blok nebo buňka tabulky.

Vlastnost 'vertical-align' se běžně používá pro vložené prvky, jako jsou obrázky, text nebo prvky inline-block v rámci řádku textu. Nevztahuje se přímo na prvky na úrovni bloku; k jejich vertikálnímu zarovnání však můžete použít techniky jako flexbox nebo polohování.

Syntax:

Zde je základní syntaxe pro vlastnost vertical-align:

 selector { vertical-align: value; } 

„Hodnota“ může být jedna z následujících možností:

základní linie:Zarovná účaří prvku s účaří jeho nadřazeného prvku. Toto je výchozí hodnota pro většinu prvků.Sub:Zarovná účaří prvku s účaří dolního indexu písma nadřazeného prvku.super:Zarovná účaří prvku s účaří horního indexu písma nadřazeného prvku.Horní:Zarovnejte horní část prvku s horní částí nejvyššího prvku na čáře v rámečku čáry.Text nahoře:Zarovná horní část prvku s horní částí písma nadřazeného prvku.Střední:Vertikálně vycentruje prvek vzhledem k rodičovskému prvku.Dno:Zarovnejte spodní část prvku se spodní částí nejnižšího prvku na čáře v rámečku čáry.Text-dole:Zarovnejte spodní část prvku se spodní částí písma nadřazeného prvku.Procento:Prvek je zarovnán svisle na zadané procento výšky čáry. Například zarovnat svisle: 50 % vycentruje prvek svisle v rámci jeho nadřazeného prvku.

POZNÁMKA: Pamatujte, že 'vertikální zarovnání' má své specifické chování v závislosti na typu prvku a kontextu, ve kterém se používá, takže jeho účinky nemusí být vždy přímočaré. Je zvláště užitečné pro zarovnání vložených prvků s textem nebo jinými vloženými prvky.

Příklady

Zde jsou některé další podrobnosti a příklady související s vlastností „vertical-align“ v CSS:

1. Zarovnání základní linie:

plsql

Svisle zarovnat základní čáruhodnota zarovná účaří prvku s účaří jeho nadřazeného prvku. Toto je výchozí chování pro většinu prvků na úrovni řádku.

Základní linie Jiný text

2. Dolní a horní index:

Svislé zarovnání:Dílčí hodnota zarovná účaří prvku s účaří dolního indexu písma nadřazeného prvku, takže se zobrazí jako dolní index. Na druhou stranu,zarovnat svisle:Super zarovná účaří prvku s účaří horního indexu písma nadřazeného prvku.

H₂O je voda. X²+ a²= r²

3. Zarovnání nahoře a dole:

Svislé zarovnání:Horní hodnota zarovná horní část prvku s horní částí nejvyššího prvku na řádku v rámečku čáry. Podobně,zarovnat svisle:Spodní část zarovná spodní část prvku se spodní částí nejnižšího prvku na čáře v rámečku čáry.

Zarovnáno nahoře Zarovnáno dole

4. Zarovnání na střed:

turbo c++ ke stažení

Svislé zarovnání:Střední hodnota svisle vycentruje prvek vzhledem k nadřazenému prvku. To se často používá k vystředění ikon nebo obrázků v textu.

Tato ikona je svisle vystředěná

5. Zarovnání textu nahoru a textu dolů:

Svislé zarovnání:Hodnota text-top zarovná horní část prvku s horní částí písma a nadřazeného prvkuzarovnat svisle:Text-bottom zarovná spodní část prvku se spodní částí písma nadřazeného prvku.

Text zarovnán nahoru Text zarovnán dolů

6. Procentuální zarovnání:

Použití procentuální hodnoty s vertikálním zarovnáním umožňuje zarovnat prvek svisle na určité procento výšky řádku. Například zarovnání svisle: 50 % vycentruje prvek na polovinu výšky čáry.

Svisle na střed

7. Vertikální centrování prvků na úrovni bloku:

Chcete-li svisle vycentrovat prvek na úrovni bloku uvnitř jeho rodiče, můžete použít rozvržení flexbox nebo mřížky.

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

8. Vertikální centrování s neznámou výškou prvku:

Pokud neznáte výšku prvku, který chcete svisle vycentrovat, můžete použít kombinaci pozice a transformace:

Fibonacciho řada v c

 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. Vertikální centrování s víceřádkovým textem:

Chcete-li svisle vycentrovat víceřádkový text v kontejneru, můžete použít kombinaci flexboxu a pseudoprvku:

 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. Vertikální centrování obrázků v kontejneru s různými poměry stran:

Pokud máte obrázky s různými poměry stran, které chcete vycentrovat v kontejneru, můžete použít kombinaci flexboxu a přizpůsobení objektu:

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. Kombinace vertikálního zarovnání s výškou řádku:

Vlastnost vertical-align můžete kombinovat s vlastností line-height, abyste dosáhli přesnějšího vertikálního zarovnání, zejména u větších velikostí písma.

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

12. Použití vlastnosti zobrazení pro zarovnání:

Zatímco svislé zarovnání funguje primárně s prvky na úrovni řádku, můžete změnit vlastnost zobrazení, abyste dosáhli svislého zarovnání prvků na úrovni bloku v konkrétních kontextech.

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

13. Svislé zarovnání v tabulkách:

Vlastnost vertical-align se často používá v buňkách tabulky () pro ovládání zarovnání obsahu v buňkách.

 td { vertical-align: middle; } 

14. Zarovnání prvků Inline-Block:

Svislé zarovnání můžete použít k zarovnání prvků vložených bloků v rámci řádku textu, například ikon vedle textu.

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

Toto je jen několik příkladů zpracování vertikálního zarovnání v různých scénářích. V závislosti na vašem konkrétním rozvržení a požadavcích budete možná muset tyto techniky upravit nebo zkombinovat, abyste dosáhli požadovaných výsledků. CSS poskytuje různé nástroje pro efektivní zpracování vertikálního zarovnání v různých kontextech.

c# obsahuje řetězec

Pamatujte, že i když vlastnost vertical-align má využití, existují komplexnější řešení pro všechny scénáře zarovnání, zejména prvky na úrovni bloku. Pro složitější rozvržení a požadavky na zarovnání se doporučuje prozkoumat moderní techniky rozvržení CSS, jako je Flexbox, CSS Grid, nebo dokonce hodnoty pozic CSS (jako jsou absolutní a relativní), abyste dosáhli požadovaných výsledků efektivněji a předvídatelněji.

Pamatujte, že „svislé zarovnání“ ovlivňuje pouze vložené prvky nebo buňky tabulky. K vertikálnímu zarovnání prvků na úrovni bloku použijte techniky jako flexbox, rozvržení mřížky nebo umístění.

Několik dalších příkladů

 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> 

Výstup

Nyní je zde další příklad, ve kterém zarovnáváme text s obrázkem.

Příklad

 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. 

Výstup

Výhody vertikálního zarovnání v CSS

Snadné použití pro vložené prvky:Vlastnost vertical-align je přímočará pro zarovnání prvků, jako jsou obrázky, ikony nebo text, v rámci řádku textu nebo jiných prvků.Široká podpora prohlížeče:Vlastnost vertical-align má dobrou podporu prohlížeče a je široce podporována v různých prohlížečích.Více možností zarovnání:Poskytuje různé možnosti zarovnání, jako je základní, střední, horní, dolní, text-top, text-bottom, dolní index a horní index, což vývojářům poskytuje flexibilitu při zarovnávání prvků na základě jejich požadavků.Responzivní zarovnání:Může být použit v responzivním designu k přizpůsobení vertikálního vyrovnání na základě velikosti kontejneru nebo dostupného prostoru.Jednoduchost pro vložené prvky:Pro zarovnání malých prvků, jako jsou ikony nebo obrázky v rámci řádku textu, poskytuje vlastnost svislé zarovnání relativně jednoduché řešení bez nutnosti složitých technik rozvržení.Doladění:Tato vlastnost umožňuje jemné doladění vertikální polohy prvků, což může být užitečné pro dosažení konkrétních cílů návrhu.Konzistence s buňkami tabulky:V kontextu tabulek vlastnost vertical-align řídí zarovnání obsahu v buňkách tabulky. To může pomoci zachovat konzistenci napříč rozvrženími založenými na tabulkách.Kombinace s textem:Efektivně zarovná prvky s textovým obsahem, jako je zarovnání ikon nebo vložených štítků se sousedním textem.Zachování poměru stran:Při zarovnávání obrázků nebo ikon v rámci řádku textu může vertikální zarovnání pomoci zachovat poměr stran těchto prvků, zejména v kombinaci s vhodnými velikostmi písma a výškami řádků.Rychlé opravy zarovnání:Když potřebujete rychlá řešení problémů s vertikálním zarovnáním, zejména ve scénářích se smíšeným obsahem, vertikální zarovnání může poskytnout rychlé řešení bez nutnosti rozsáhlé restrukturalizace rozvržení.Styl CSS e-mailu:V e-mailech HTML, kde je třeba lépe podporovat složitá rozvržení, může být použití vertikálního zarovnání užitečné pro základní vertikální zarovnání prvků, aniž byste se spoléhali na externí šablony stylů nebo složité techniky.Kompatibilní s displejem:inline-block: Vlastnost vertical-align je kompatibilní s prvky inline-block, což umožňuje snadné vertikální zarovnání takových prvků v rámci řádku.Zachování konzistence:U prvků, které jsou součástí tabulkových dat nebo které je třeba zarovnat s podobnými prvky v různých řádcích nebo sloupcích, může vertikální zarovnání pomoci zachovat vizuální konzistenci.Kompatibilita prohlížeče:Na rozdíl od některých novějších technik CSS je vertikální zarovnání součástí CSS již dlouhou dobu a těší se dobré kompatibilitě mezi různými prohlížeči.

Nevýhody vertikálního zarovnání v CSS

Omezeno na vložené prvky:Nejvýznamnějším omezením vlastnosti vertical-align je, že funguje pouze pro prvky na úrovni řádku nebo buňky tabulky. Nevztahuje se přímo na prvky na úrovni bloku. Díky tomu může být vertikální zarovnání u větších prvků nebo složitých rozvržení náročnější.Nekonzistentní chování:Vertikální zarovnání může být složité a nekonzistentní, zejména u různých velikostí písma, výšek řádků a vnořených prvků. Stejná hodnota svislého zarovnání může přinést různé výsledky na základě kontextu.Vtipy prohlížeče:Některé starší prohlížeče mohou mít nekonzistentní interpretace nebo zvláštnosti s vlastností vertical-align, což může vést k neočekávaným výsledkům. Tento problém se však zlepšil s pokrokem moderních prohlížečů.Omezená kontrola nad mezerami:Vlastnost vertical-align se primárně zabývá vertikálním zarovnáním prvků, ale nabízí pouze malou kontrolu nad mezerami mezi prvky. Úprava mezer často vyžaduje další úpravy CSS nebo HTML.Flexbox a Grid jako alternativy:Pro složitější požadavky na rozvržení a vertikální zarovnání prvků na úrovni bloků se vývojáři často spoléhají na Flexbox nebo CSS Grid, které poskytují robustnější a předvídatelnější řešení.Nevhodné pro úplné centrování:Zatímco vertikální zarovnání je užitečné pro vertikální zarovnání vložených prvků, je vhodné pro úplné vystředění (horizontálně a vertikálně) prvků na úrovni bloku s dalšími technikami CSS.Zavádějící název:Název 'vertical-align' může být zavádějící, protože nezarovnává prvek vertikálně tak, jak vývojáři často očekávají. Místo toho řídí zarovnání obsahu prvku v rámci jeho řádkového rámečku.Složitost s různými fonty:Chování vertikálního zarovnání může být nepředvídatelné při práci s prvky různých velikostí písma a výšky řádků. To může ztížit konzistentní vertikální zarovnání.Omezeno pro komplexní rozvržení:Není vhodný pro složitá rozvržení nebo scénáře, kde musíte svisle zarovnat větší prvky na úrovni bloku v rámci nadřazeného kontejneru.Kompatibilita mezi prohlížeči:Zatímco moderní prohlížeče mají vylepšenou podporu pro vertikální zarovnání, starší prohlížeče mohou stále vykazovat nekonzistence nebo neočekávané chování.Alternativní techniky:Moderní techniky rozvržení CSS, jako je Flexbox a CSS Grid, nabízejí výkonnější a předvídatelnější způsoby, jak zvládnout složité požadavky na rozvržení, včetně vertikálního zarovnání prvků na úrovni řádků i bloků.Aspekty přístupnosti:Použití vertikálního zarovnání pro rozvržení nemusí být nejdostupnější přístup, protože by mohlo rušit čtečky obrazovky a další pomocné technologie. Sémantické HTML a správné techniky CSS jsou často lepší volbou pro usnadnění přístupu.Výzvy při ladění:Ladění neočekávaného chování nebo problémů se zarovnáním souvisejících s vertikálním zarovnáním může být někdy složité, zejména při práci s vnořenými prvky a různými velikostmi písem.Evoluce rozvržení webu:Jak se prostředí vývoje webu vyvíjí, nové techniky rozvržení, jako je CSS Grid Layout a Flexbox, poskytují modernější a komplexnější řešení pro problémy s rozvržením, což potenciálně činí vertikální zarovnání méně relevantní pro mnoho scénářů.

Celkově vzato, zatímco vlastnost vertical-align je užitečná pro zarovnání vložených prvků nebo buněk tabulky v rámci řádku textu, vývojáři často potřebují jiné techniky CSS pro pokročilejší požadavky na rozvržení a umístění, zejména když se zabývají prvky na úrovni bloku nebo složitými rozvrženími. CSS Flexbox a CSS Grid jsou výkonné alternativy pro širší ovládání zarovnání a umístění.

Závěr

Vlastnost vertical-align je užitečná pro zarovnání vložených prvků v textu nebo buňkách tabulky. Má však omezení a jeho efektivní použití pro komplexní rozvržení nebo prvky na úrovni bloků může být náročné. Vývojáři by měli zvážit moderní techniky rozvržení CSS, které poskytují větší kontrolu a flexibilitu při zarovnání a umístění.