TechCodeview

V CSS vlastnosť vertical-align riadi vertikálne zarovnanie prvkov na úrovni riadku alebo buniek tabuľky v rámci prvku, ktorý obsahuje. Vzťahuje sa na prvky, ktoré sú súčasťou riadku textu alebo sú zobrazené ako vložený blok alebo bunka tabuľky.

Vlastnosť „vertikálne zarovnanie“ sa bežne používa pre vložené prvky, ako sú obrázky, text alebo prvky vloženého bloku v riadku textu. Nevzťahuje sa priamo na prvky na úrovni bloku; na ich vertikálne zarovnanie však môžete použiť techniky ako flexbox alebo polohovanie.

Syntax:

Tu je základná syntax pre vlastnosť vertikálneho zarovnania:

 selector { vertical-align: value; } 

„Hodnota“ môže byť jedna z nasledujúcich možností:

Základná línia:Zarovná základnú čiaru prvku so základnou čiarou jeho nadradeného prvku. Toto je predvolená hodnota pre väčšinu prvkov.Sub:Zarovná základnú čiaru prvku so základnou čiarou dolného indexu písma nadradeného prvku.Super:Zarovná základnú čiaru prvku so základnou čiarou horného indexu písma nadradeného prvku.Hore:Zarovnajte hornú časť prvku s hornou časťou najvyššieho prvku na čiare v poli čiary.Text hore:Zarovná hornú časť prvku s hornou časťou písma nadradeného prvku.Stred:Vertikálne vycentruje prvok vzhľadom na nadradený prvok.Spodná časť:Zarovnajte spodok prvku so spodkom najnižšieho prvku na čiare v rámčeku čiar.Text dole:Zarovnajte spodnú časť prvku so spodnou časťou písma nadradeného prvku.Percento:Prvok je zarovnaný vertikálne v určenom percente výšky riadku. Napríklad vertikálne zarovnanie: 50 % vycentruje prvok vertikálne v rámci jeho nadradeného prvku.

POZNÁMKA: Pamätajte, že „vertikálne zarovnanie“ má svoje špecifické správanie v závislosti od typu prvku a kontextu, v ktorom sa používa, takže jeho účinky nemusia byť vždy jednoduché. Je to užitočné najmä na zarovnanie vložených prvkov s textom alebo inými vloženými prvkami.

Príklady

Tu je niekoľko ďalších podrobností a príkladov súvisiacich s vlastnosťou „vertical-align“ v CSS:

1. Zarovnanie základnej čiary:

ako previesť znak na reťazec

Vertikálne zarovnať základnú čiaruhodnota zarovná základnú čiaru prvku so základnou čiarou jeho nadradeného prvku. Toto je predvolené správanie pre väčšinu prvkov na úrovni riadkov.

Základná línia Iný text

2. Dolný a horný index:

Vertikálne zarovnanie:Podhodnota zarovná základnú líniu prvku so základnou líniou dolného indexu písma nadradeného prvku, vďaka čomu sa javí ako dolný index. Na druhej strane,vertikálne zarovnať:Super zarovná základnú čiaru prvku so základnou čiarou horného indexu písma nadradeného prvku.

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

ak a inak v bash

3. Horné a spodné zarovnanie:

Vertikálne zarovnanie:Najvyššia hodnota zarovná hornú časť prvku s hornou časťou najvyššieho prvku na riadku v poli riadku. podobne,vertikálne zarovnať:Spodná časť zarovnáva spodnú časť prvku so spodnou časťou najnižšieho prvku na čiare v rámčeku čiar.

Zarovnané zhora Zarovnané dole

4. Zarovnanie na stred:

Vertikálne zarovnanie:Stredná hodnota vertikálne vycentruje prvok vzhľadom na nadradený prvok. Toto sa často používa na vycentrovanie ikon alebo obrázkov v texte.

Táto ikona je vertikálne vycentrovaná

5. Zarovnanie textu nahor a nadol:

Vertikálne zarovnanie:Hodnota text-top zarovná hornú časť prvku s hornou časťou písma nadradeného prvku avertikálne zarovnať:Text-bottom zarovná spodnú časť prvku so spodnou časťou písma nadradeného prvku.

Text zarovnaný nahor Text zarovnaný nadol

6. Percentuálne zarovnanie:

Použitie percentuálnej hodnoty so zvislým zarovnaním vám umožňuje zarovnať prvok zvisle na určité percento výšky riadku. Napríklad zvislé zarovnanie: 50 % vycentruje prvok na polovicu výšky riadku.

Vertikálne na stred

7. Vertikálne centrovanie prvkov na úrovni bloku:

Ak chcete vertikálne vycentrovať prvok na úrovni bloku vo vnútri jeho rodiča, môžete použiť rozloženie flexbox alebo mriež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álne centrovanie s neznámou výškou prvku:

Ak nepoznáte výšku prvku, ktorý chcete vertikálne vycentrovať, môžete použiť kombináciu polohy a transformácie:

 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álne centrovanie s viacriadkovým textom:

Na vertikálne vycentrovanie viacriadkového textu v kontajneri môžete použiť kombináciu flexboxu a pseudoprvku:

enum tostring java

 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álne centrovanie obrázkov v kontajneri s rôznymi pomermi strán:

Ak máte obrázky s rôznymi pomermi strán, ktoré chcete vycentrovať v kontajneri, môžete použiť kombináciu flexboxu a prispôsobenia 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. Kombinácia vertikálneho zarovnania s výškou čiary:

Vlastnosť vertical-align môžete skombinovať s vlastnosťou line-height, aby ste dosiahli presnejšie vertikálne zarovnanie, najmä pri väčších veľkostiach písma.

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

12. Použitie vlastnosti zobrazenia na zarovnanie:

zalamovanie slov css

Zatiaľ čo vertikálne zarovnanie funguje primárne s prvkami na úrovni riadkov, môžete zmeniť vlastnosť zobrazenia, aby ste dosiahli vertikálne zarovnanie prvkov na úrovni bloku v špecifických kontextoch.

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

13. Vertikálne zarovnanie v tabuľkách:

Vlastnosť vertikálneho zarovnania sa často používa v bunkách tabuľky () na ovládanie zarovnania obsahu v bunkách.

 td { vertical-align: middle; } 

14. Zarovnanie prvkov v riadku:

Vertikálne zarovnanie môžete použiť na zarovnanie prvkov vložených blokov v rámci riadku textu, napríklad ikon vedľa textu.

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

Toto je len niekoľko príkladov spracovania vertikálneho zarovnania v rôznych scenároch. V závislosti od konkrétneho rozloženia a požiadaviek možno budete musieť tieto techniky prispôsobiť alebo skombinovať, aby ste dosiahli požadované výsledky. CSS poskytuje rôzne nástroje na efektívne zvládnutie vertikálneho zarovnania v rôznych kontextoch.

previesť z reťazca na celé číslo java

Pamätajte, že zatiaľ čo vlastnosť vertikálneho zarovnania má využitie, existujú komplexnejšie riešenia pre všetky scenáre zarovnania, najmä prvky na úrovni bloku. Pre komplexnejšie rozloženia a požiadavky na zarovnanie sa odporúča preskúmať moderné techniky rozloženia CSS, ako je Flexbox, CSS Grid alebo dokonca hodnoty pozície CSS (ako sú absolútne a relatívne), aby sa požadované výsledky dosiahli efektívnejšie a predvídateľnejšie.

Pamätajte, že „vertikálne zarovnanie“ ovplyvňuje iba prvky na úrovni riadkov alebo bunky tabuľky. Na vertikálne zarovnanie prvkov na úrovni bloku použite techniky ako flexbox, rozloženie mriežky alebo umiestnenie.

Niekoľko ďalších príkladov

 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ýkon

Teraz je tu ďalší príklad, v ktorom zarovnávame text s obrázkom.

Prí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ýkon

Výhody vertikálneho zarovnania v CSS

Jednoduché použitie pre vložené prvky:Vlastnosť vertikálneho zarovnania je jednoduchá na zarovnanie prvkov, ako sú obrázky, ikony alebo text, v rámci riadku textu alebo iných prvkov.Široká podpora prehliadača:Vlastnosť vertical-align má dobrú podporu prehliadača a je široko podporovaná v rôznych prehliadačoch.Viaceré možnosti zarovnania:Poskytuje rôzne možnosti zarovnania, ako je základná čiara, stred, horná, spodná, textová časť, spodná časť textu, dolný index a horný index, čo dáva vývojárom flexibilitu pri zarovnávaní prvkov na základe ich požiadaviek.Responzívne zarovnanie:Môže sa použiť v responzívnom dizajne na prispôsobenie vertikálneho zarovnania na základe veľkosti kontajnera alebo dostupného priestoru.Jednoduchosť pre vložené prvky:Na zarovnanie malých prvkov, ako sú ikony alebo obrázky v rámci riadku textu, poskytuje vlastnosť vertikálneho zarovnania relatívne jednoduché riešenie bez potreby zložitých techník rozloženia.Jemné doladenie:Vlastnosť umožňuje jemné doladenie vertikálnej polohy prvkov, čo môže byť užitočné pre dosiahnutie konkrétnych cieľov dizajnu.Konzistencia s bunkami tabuľky:V kontexte tabuliek vlastnosť vertikálne zarovnať riadi zarovnanie obsahu v bunkách tabuľky. To môže pomôcť zachovať konzistenciu medzi tabuľkovými rozloženiami.Kombinácia s textom:Efektívne zarovnáva prvky s textovým obsahom, napríklad zarovnáva ikony alebo vložené štítky so susedným textom.Zachovanie pomerov strán:Pri zarovnávaní obrázkov alebo ikon v rámci riadku textu môže vertikálne zarovnanie pomôcť zachovať pomer strán týchto prvkov, najmä v kombinácii s vhodnými veľkosťami písma a výškami riadkov.Rýchle opravy zarovnania:Keď potrebujete rýchle riešenia problémov so zvislým zarovnaním, najmä v scenároch so zmiešaným obsahom, zvislé zarovnanie môže poskytnúť rýchle riešenie bez toho, aby si vyžadovalo rozsiahle reštrukturalizácie rozloženia.CSS štýl e-mailu:V e-mailoch HTML, kde je potrebné lepšie podporovať zložité rozloženia, môže byť použitie vertikálneho zarovnania užitočné na základné vertikálne zarovnanie prvkov bez spoliehania sa na externé šablóny so štýlmi alebo zložité techniky.Kompatibilné s displejom:inline-block: Vlastnosť vertical-align je kompatibilná s prvkami inline-block, čo umožňuje jednoduché vertikálne zarovnanie takýchto prvkov v rámci riadku.Zachovanie konzistencie:Pre prvky, ktoré sú súčasťou tabuľkových údajov alebo ktoré je potrebné zarovnať s podobnými prvkami v rôznych riadkoch alebo stĺpcoch, môže vertikálne zarovnanie pomôcť zachovať vizuálnu konzistenciu.Kompatibilita prehliadača:Na rozdiel od niektorých novších techník CSS je vertikálne zarovnanie súčasťou CSS už dlhú dobu a teší sa dobrej kompatibilite medzi prehliadačmi.

Nevýhody vertikálneho zarovnania v CSS

Obmedzené na vložené prvky:Najvýznamnejším obmedzením vlastnosti vertikálneho zarovnania je, že funguje iba pre prvky na úrovni riadku alebo bunky tabuľky. Nevzťahuje sa priamo na prvky na úrovni bloku. To môže spôsobiť, že vertikálne zarovnanie bude náročnejšie pre väčšie prvky alebo zložité rozloženia.Nekonzistentné správanie:Vertikálne zarovnanie môže byť zložité a nekonzistentné, najmä s rôznymi veľkosťami písma, výškami riadkov a vnorenými prvkami. Rovnaká hodnota vertikálneho zarovnania môže priniesť rôzne výsledky na základe kontextu.Vtipy prehliadača:Niektoré staršie prehliadače môžu mať nekonzistentné interpretácie alebo zvláštnosti s vlastnosťou vertical-align, čo môže viesť k neočakávaným výsledkom. Tento problém sa však zlepšil s pokrokom moderných prehliadačov.Obmedzená kontrola nad rozstupom:Vlastnosť vertical-align sa primárne zaoberá zvislým zarovnaním prvkov, ale ponúka len malú kontrolu nad rozostupmi medzi prvkami. Úprava medzier si často vyžaduje dodatočné úpravy CSS alebo HTML.Flexbox a Grid ako alternatívy:Pre komplexnejšie požiadavky na rozloženie a vertikálne zarovnanie prvkov na úrovni blokov sa vývojári často spoliehajú na Flexbox alebo CSS Grid, ktoré poskytujú robustnejšie a predvídateľnejšie riešenia.Nevhodné pre úplné centrovanie:Zatiaľ čo vertikálne zarovnanie je užitočné na vertikálne zarovnanie vložených prvkov, je vhodné na úplné vycentrovanie (horizontálne a vertikálne) prvkov na úrovni bloku s ďalšími technikami CSS.Zavádzajúci názov:Názov „vertical-align“ môže byť zavádzajúci, pretože nezarovnáva prvok vertikálne tak, ako to vývojári často očakávajú. Namiesto toho riadi zarovnanie obsahu prvku v jeho riadku.Zložitosť s rôznymi typmi písma:Správanie vertikálneho zarovnania môže byť nepredvídateľné pri práci s prvkami rôznych veľkostí písma a výšky riadkov. To môže sťažiť konzistentné vertikálne zarovnanie.Obmedzené pre zložité rozloženia:Nie je vhodný pre zložité rozloženia alebo scenáre, kde musíte vertikálne zarovnať väčšie prvky na úrovni bloku v rámci nadradeného kontajnera.Kompatibilita medzi prehliadačmi:Zatiaľ čo moderné prehliadače majú vylepšenú podporu pre vertikálne zarovnanie, staršie prehliadače môžu stále vykazovať nezrovnalosti alebo neočakávané správanie.Alternatívne techniky:Moderné techniky rozloženia CSS, ako sú Flexbox a CSS Grid, ponúkajú výkonnejšie a predvídateľnejšie spôsoby, ako zvládnuť zložité požiadavky na rozloženie, vrátane vertikálneho zarovnania vložených prvkov aj prvkov na úrovni bloku.Úvahy o dostupnosti:Použitie vertikálneho zarovnania na rozloženie nemusí byť najdostupnejší prístup, pretože by to mohlo rušiť čítačky obrazovky a iné pomocné technológie. Sémantické HTML a správne techniky CSS sú často lepšou voľbou pre dostupnosť.Výzvy na ladenie:Ladenie neočakávaného správania alebo problémov so zarovnaním súvisiacich s vertikálnym zarovnaním môže byť niekedy zložité, najmä pri práci s vnorenými prvkami a rôznymi veľkosťami písma.Vývoj rozloženia webu:Ako sa vývojové prostredie webu vyvíja, nové techniky rozloženia, ako je CSS Grid Layout a Flexbox, poskytujú modernejšie a komplexnejšie riešenia pre výzvy rozloženia, vďaka čomu je vertikálne zarovnanie pre mnohé scenáre menej relevantné.

Celkovo možno povedať, že zatiaľ čo vlastnosť vertikálneho zarovnania je užitočná na zarovnanie vložených prvkov alebo buniek tabuľky v riadku textu, vývojári často potrebujú iné techniky CSS pre pokročilejšie požiadavky na rozloženie a umiestnenie, najmä keď sa zaoberajú prvkami na úrovni bloku alebo zložitými rozloženiami. CSS Flexbox a CSS Grid sú výkonné alternatívy pre širšiu kontrolu zarovnania a umiestnenia.

Záver

Vlastnosť vertikálneho zarovnania je užitočná na zarovnanie riadkových prvkov v rámci textu alebo buniek tabuľky. Má však obmedzenia a môže byť náročné ho efektívne použiť pre zložité rozloženia alebo prvky na úrovni blokov. Vývojári by mali zvážiť moderné techniky rozloženia CSS, ktoré poskytujú väčšiu kontrolu a flexibilitu pri zarovnávaní a umiestňovaní.