У ЦСС-у, својство вертицал-алигн контролише вертикално поравнање елемената на линијском нивоу или ћелија табеле унутар њиховог елемента. Примењује се на елементе који су део реда текста или су приказани као инлине-блоцк или табле-целл.

Својство 'вертицал-алигн' се обично користи за инлине елементе као што су слике, текст или елементи инлине-блока унутар реда текста. Не примењује се директно на елементе на нивоу блока; међутим, можете користити технике попут флексбокса или позиционирања да бисте их вертикално поравнали.

Синтакса:

Ево основне синтаксе за својство вертицал-алигн:

 selector { vertical-align: value; } 

„Вредност“ може бити једна од следећих опција:

Основна линија:Поравнава основну линију елемента са основном линијом његовог родитељског елемента. Ово је подразумевана вредност за већину елемената.Суб:Поравнава основну линију елемента са основном линијом индекса фонта родитељског елемента.супер:Поравнава основну линију елемента са основном линијом суперсцрипта фонта родитељског елемента.Врх:Поравнајте врх елемента са врхом највишег елемента на линији унутар оквира линије.Тект-топ:Поравна врх елемента са врхом фонта родитељског елемента.средина:Вертикално центрира елемент у односу на родитељски елемент.Дно:Поравнајте дно елемента са дном најнижег елемента на линији унутар оквира линије.Текст на дну:Поравнајте дно елемента са дном фонта родитељског елемента.Проценат:Елемент је поравнат вертикално у одређеном проценту висине линије. На пример, вертицал-алигн: 50% ће центрирати елемент вертикално унутар његовог надређеног елемента.

НАПОМЕНА: Запамтите да 'вертицал-алигн' има своје специфично понашање у зависности од типа елемента и контекста у коме се користи, тако да његови ефекти можда неће увек бити јасни. Посебно је корисно за поравнавање инлине елемената са текстом или другим инлине елементима.

Примери

Ево још неких детаља и примера везаних за својство 'вертицал-алигн' у ЦСС-у:

1. Поравнање основне линије:

Основна линија вертикалног поравнањавалуе поравнава основну линију елемента са основном линијом његовог родитељског елемента. Ово је подразумевано понашање за већину елемената на линијском нивоу.

Баселине Други текст

класа јава скенера

2. Субсцрипт и Суперсцрипт:

Вертикално поравнање:Подвредност поравнава основну линију елемента са основном линијом индекса фонта родитељског елемента, чинећи да се појављује као индекс. С друге стране,вертикално поравнање:Супер поравнава основну линију елемента са основном линијом суперсцрипта фонта родитељског елемента.

Х₂О је вода. Икс²+ и²= р²

3. Горње и доње поравнање:

Вертикално поравнање:Највиша вредност поравнава врх елемента са врхом највишег елемента на линији унутар оквира линије. Слично,вертикално поравнање:Дно поравна дно елемента са дном најнижег елемента на линији унутар оквира линије.

Топ-алигнед Поравнано одоздо

4. Средње поравнање:

Вертикално поравнање:Средња вредност вертикално центрира елемент у односу на родитељски елемент. Ово се често користи за центрирање икона или слика унутар текста.

Ова икона је вертикално центрирана

5. Поравнање текста на врху и на дну текста:

Вертикално поравнање:Вредност на врху текста поравнава врх елемента са врхом фонта родитељског елемента ивертикално поравнање:Тект-боттом поравнава дно елемента са дном фонта родитељског елемента.

Текст је поравнат на врху Текст је поравнат на дну

6. Процентуално поравнање:

Коришћење процентуалне вредности са вертикалним поравнањем омогућава вам да поравнате елемент вертикално у одређеном проценту висине линије. На пример, вертикално поравнање: 50% ће центрирати елемент на половини висине линије.

Центрирано вертикално

7. Вертикално центрирање елемената на нивоу блока:

Да бисте вертикално центрирали елемент на нивоу блока унутар његовог родитеља, можете користити флекбок или распоред мреже.

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

8. Вертикално центрирање са непознатом висином елемента:

Ако не знате висину елемента који желите да центрирате вертикално, можете користити комбинацију положаја и трансформације:

 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. Вертикално центрирање са вишелинијским текстом:

Да бисте вертикално центрирали текст у више редова унутар контејнера, можете користити комбинацију флексбокса и псеудо-елемента:

 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. Вертикално центрирање слика у контејнеру са различитим размерама:

Ако имате слике различитих размера које желите да центрирате унутар контејнера, можете да користите комбинацију флексбокса и уклапања објекта:

ХТМЛ:

 <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"> 

ЦСС:

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

11. Комбиновање вертикалног поравнања са висином линије:

Можете комбиновати својство вертицал-алигн са својством лине-хеигхт да бисте постигли прецизније вертикално поравнање, посебно са већим величинама фонта.

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

12. Коришћење својства приказа за поравнање:

Док вертикално поравнање првенствено функционише са елементима на нивоу у линији, можете да промените својство приказа да бисте постигли вертикално поравнање за елементе на нивоу блока у одређеним контекстима.

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

13. Вертикално поравнање у табелама:

Својство вертицал-алигн се често користи у ћелијама табеле () за контролу поравнања садржаја унутар ћелија.

наплата са гит-ом

 td { vertical-align: middle; } 

14. Поравнање инлине-блок елемената:

Можете да користите вертикално поравнање да бисте поравнали елементе инлине-блока унутар реда текста, на пример, иконе поред текста.

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

Ово је само неколико примера руковања вертикалним поравнањем у различитим сценаријима. У зависности од вашег специфичног распореда и захтева, можда ћете морати да прилагодите или комбинујете ове технике да бисте постигли жељене резултате. ЦСС пружа различите алате за ефикасно руковање вертикалним поравнањем у различитим контекстима.

Имајте на уму да иако својство вертикалног поравнања има користи, постоје свеобухватнија решења за све сценарије поравнања, посебно за елементе на нивоу блока. За сложеније распореде и захтеве за поравнање, препоручује се истраживање модерних техника ЦСС распореда као што су Флекбок, ЦСС Грид или чак вредности ЦСС позиције (као што су апсолутне и релативне) како би се жељени резултати постигли ефикасније и предвидљивије.

Запамтите да 'вертицал-алигн' утиче само на елементе на инлине нивоу или ћелије табеле. Користите технике попут флексбокса, распореда мреже или позиционирања да бисте вертикално поравнали елементе на нивоу блока.

Још неколико примера

 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> 

Излаз

Сада, постоји још један пример у којем поравнавамо текст са сликом.

Пример

 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. 

Излаз

Предности вертикалног поравнања у ЦСС-у

Једноставан за употребу за уграђене елементе:Својство вертицал-алигн је једноставно за поравнавање елемената, као што су слике, иконе или текст, унутар реда текста или других елемената.Подршка за широки претраживач:Својство вертицал-алигн има добру подршку за прегледач и широко је подржано у различитим претраживачима.Више опција поравнања:Пружа различите опције поравнања, као што су основна линија, средина, врх, дно, текст-врх, текст-доњи, индексни и суперскрипт, дајући програмерима флексибилност у поравнавању елемената на основу њихових захтева.Прилагодљиво поравнање:Може се користити у прилагодљивом дизајну за прилагођавање вертикалног поравнања на основу величине контејнера или расположивог простора.Једноставност за уграђене елементе:За поравнавање малих елемената као што су иконе или слике унутар реда текста, својство вертицал-алигн пружа релативно једноставно решење без потребе за сложеним техникама распореда.Фино подешавање:Својство омогућава фино подешавање вертикалног положаја елемената, што може бити корисно за постизање специфичних циљева дизајна.Конзистентност са ћелијама табеле:У контексту табела, својство вертицал-алигн контролише поравнање садржаја унутар ћелија табеле. Ово може помоћи у одржавању конзистентности у изгледима заснованим на табели.Комбиновање са текстом:Ефикасно поравнава елементе са текстуалним садржајем, као што је поравнавање икона или уметнутих ознака са суседним текстом.Одржавање размера:Када поравнате слике или иконе унутар реда текста, вертикално поравнање може помоћи у одржавању односа страница ових елемената, посебно када се комбинује са одговарајућим величинама фонта и висинама реда.Брзе поправке за поравнање:Када су вам потребна брза решења за проблеме са вертикалним поравнањем, посебно у сценаријима са мешовитим садржајем, вертикално поравнање може да пружи брзо решење без потребе за опсежним реструктурирањем изгледа.ЦСС стил е-поште:У ХТМЛ порукама е-поште, где сложени изгледи морају бити боље подржани, коришћење вертикалног поравнања може бити од помоћи за основно вертикално поравнање елемената без ослањања на спољне таблице стилова или сложене технике.Компатибилан са екраном:инлине-блоцк: Својство вертицал-алигн је компатибилно са елементима инлине-блоцк, омогућавајући лако вертикално поравнање таквих елемената унутар линије.Одржавање доследности:За елементе који су део табеларних података или морају да се поравнају са сличним елементима у различитим редовима или колонама, вертикално поравнање може помоћи у одржавању визуелне доследности.Компатибилност претраживача:За разлику од неких новијих ЦСС техника, вертикално поравнање је део ЦСС-а већ дуже време и ужива добру компатибилност са различитим претраживачима.

Недостаци вертикалног поравнања у ЦСС-у

Ограничено на уграђене елементе:Најзначајније ограничење својства вертикалног поравнања је то што оно ради само за елементе на линијском нивоу или ћелије табеле. Не примењује се директно на елементе на нивоу блока. Ово може учинити вертикално поравнање изазовнијим за веће елементе или сложене распореде.Недоследно понашање:Вертикално поравнање може бити незгодно и недоследно, посебно са различитим величинама фонта, висинама линија и угнежђеним елементима. Иста вредност вертикалног поравнања може произвести различите резултате у зависности од контекста.Недостаци претраживача:Неки старији прегледачи могу имати недоследна тумачења или недостатке са својством вертикалног поравнања, што може довести до неочекиваних резултата. Међутим, овај проблем се побољшао са напретком модерних претраживача.Ограничена контрола размака:Својство вертицал-алигн првенствено се бави вертикалним поравнањем елемената, али нуди само малу контролу над размаком између елемената. Подешавање размака често захтева додатне ЦСС или ХТМЛ модификације.Флекбок и Грид као алтернативе:За сложеније захтеве распореда и вертикално поравнање елемената на нивоу блока, програмери се често ослањају на Флекбок или ЦСС Грид, који пружају робуснија и предвидљивија решења.Није погодно за потпуно центрирање:Док је вертикално поравнање корисно за вертикално поравнавање инлине елемената, погодно је за елементе на нивоу блока са пуним центром (хоризонтално и вертикално) са додатним ЦСС техникама.Погрешно име:Назив 'вертицал-алигн' може бити погрешан јер не поравна елемент вертикално на начин на који програмери често очекују. Уместо тога, контролише поравнање садржаја елемента унутар оквира линије.Сложеност са различитим фонтовима:Понашање вертикалног поравнања може бити непредвидиво када се ради са елементима различитих величина фонта и висине реда. Ово може да изазове доследно вертикално поравнање.Ограничено за сложене распореде:Није погодан за сложене распореде или сценарије где морате вертикално да поравнате веће елементе на нивоу блока унутар родитељског контејнера.Компатибилност са различитим претраживачима:Док модерни претраживачи имају побољшану подршку за вертикално поравнање, старији претраживачи и даље могу показивати недоследности или неочекивано понашање.Алтернативне технике:Савремене технике ЦСС распореда као што су Флекбок и ЦСС Грид нуде моћније и предвидљивије начине за руковање сложеним захтевима распореда, укључујући вертикално поравнање и инлине елемената и елемената на нивоу блока.Разматрања приступачности:Коришћење вертикалног поравнања за изглед можда није најприступачнији приступ, јер би могло да омета читаче екрана и друге помоћне технологије. Семантички ХТМЛ и исправне ЦСС технике су често бољи избори за приступачност.Изазови отклањања грешака:Отклањање грешака у неочекиваном понашању или проблемима са поравнањем у вези са вертикалним поравнањем понекад може бити незгодно, посебно када се ради са угнежђеним елементима и различитим величинама фонта.Еволуција веб изгледа:Како се окружење веб развоја развија, нове технике распореда као што су ЦСС Грид Лаиоут и Флекбок пружају модернија и свеобухватнија решења за изазове изгледа, потенцијално чинећи вертикално поравнање мање релевантним за многе сценарије.

Све у свему, док је својство вертицал-алигн згодно за поравнавање уметнутих елемената или ћелија табеле унутар реда текста, програмерима су често потребне друге ЦСС технике за напредније захтеве распореда и позиционирања, посебно када се баве елементима на нивоу блока или сложеним изгледима. ЦСС Флекбок и ЦСС Грид су моћне алтернативе за шире поравнање и контролу позиционирања.

Закључак

Својство вертицал-алигн је корисно за поравнавање уметнутих елемената унутар текста или ћелија табеле. Међутим, он има ограничења и може бити изазован за ефикасно коришћење за сложене распореде или елементе на нивоу блока. Програмери би требало да размотре модерне технике ЦСС распореда које пружају већу контролу и флексибилност у вези са поравнавањем и позиционирањем.