В CSS свойството vertical-align контролира вертикалното подравняване на елементи на вградено ниво или клетки на таблица в рамките на съдържащия ги елемент. Прилага се за елементи, които са част от ред текст или се показват като вграден блок или клетка от таблица.

Свойството 'vertical-align' обикновено се използва за вградени елементи като изображения, текст или вградени блокови елементи в ред от текст. Не се прилага директно към елементи на ниво блок; можете обаче да използвате техники като flexbox или позициониране, за да ги подравните вертикално.

Синтаксис:

Ето основния синтаксис за свойството vertical-align:

 selector { vertical-align: value; } 

„Стойността“ може да бъде една от следните опции:

Базово ниво:Подравнява базовата линия на елемента с базовата линия на неговия родителски елемент. Това е стойността по подразбиране за повечето елементи.под:Подравнява базовата линия на елемента с базовата линия на долен индекс на шрифта на родителския елемент.Супер:Подравнява основната линия на елемента с основната линия на горния индекс на шрифта на родителския елемент.Връх:Подравнете горната част на елемента с горната част на най-високия елемент на линията в полето за линия.Горе на текста:Подравнява горната част на елемента с горната част на шрифта на родителския елемент.Средно:Вертикално центрира елемента спрямо родителския елемент.отдолу:Подравнете долната част на елемента с долната част на най-долния елемент на линията в полето за линия.Текст отдолу:Подравнете долната част на елемента с долната част на шрифта на родителския елемент.Процент:Елементът е подравнен вертикално на определен процент от височината на линията. Например, vertical-align: 50% ще центрира елемента вертикално в неговия родителски елемент.

ЗАБЕЛЕЖКА: Не забравяйте, че 'vertical-align' има специфично поведение в зависимост от типа на елемента и контекста, в който се използва, така че неговите ефекти може да не винаги са ясни. Това е особено полезно за подравняване на вградени елементи с текст или други вградени елементи.

Примери

Ето някои повече подробности и примери, свързани със свойството 'vertical-align' в CSS:

1. Подравняване на базовата линия:

Основната линия за вертикално подравняванеvalue изравнява базовата линия на елемента с базовата линия на неговия родителски елемент. Това е поведението по подразбиране за повечето елементи на вградено ниво.

Базово ниво Друг текст

2. Долен и горен индекс:

Вертикалното подравняване:Подстойността подравнява базовата линия на елемента с базовата линия на индекса на шрифта на родителския елемент, което го прави да изглежда като индекс. От друга страна,вертикално подравняване:Super подравнява основната линия на елемента с горната линия на основния индекс на шрифта на родителския елемент.

з₂О е вода. х²+ и²= r²

3. Подравняване отгоре и отдолу:

Вертикалното подравняване:Горната стойност подравнява горната част на елемента с горната част на най-високия елемент на линията в полето за линия. По същия начин,вертикално подравняване:The bottom подравнява долната част на елемента с долната част на най-долния елемент на линията в полето за линия.

Подравнено отгоре Подравнено отдолу

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

звездна топология

Вертикалното подравняване:Средната стойност вертикално центрира елемента спрямо родителския елемент. Това често се използва за центриране на икони или изображения в текста.

Тази икона е вертикално центрирана

5. Подравняване на текста отгоре и отдолу:

Вертикалното подравняване:Text-top стойност подравнява горната част на елемента с горната част на шрифта на родителския елемент ивертикално подравняване:Text-bottom подравнява долната част на елемента с долната част на шрифта на родителския елемент.

Текстът е подравнен отгоре Текстът е подравнен отдолу

6. Процентно подравняване:

Използването на процентна стойност с вертикално подравняване ви позволява да подравните елемента вертикално на определен процент от височината на линията. Например, vertical-align: 50% ще центрира елемента на половината от височината на реда.

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

приоритетна опашка

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

За да центрирате вертикално елемент на ниво блок вътре в неговия родител, можете да използвате flexbox или мрежово оформление.

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

За да центрирате вертикално многоредов текст в контейнер, можете да използвате комбинация от flexbox и псевдоелемент:

 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. Вертикално центриране на изображения в контейнер с различни пропорции:

Ако имате изображения с различни пропорции, които искате да центрирате в контейнер, можете да използвате комбинация от flexbox и object-fit:

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. Комбиниране на вертикално подравняване с височина на линията:

Можете да комбинирате свойството vertical-align със свойството line-height, за да постигнете по-прецизно вертикално подравняване, особено при по-големи размери на шрифта.

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

12. Използване на свойствата на дисплея за подравняване:

Въпреки че вертикалното подравняване работи предимно с елементи на вградено ниво, можете да промените свойството за показване, за да постигнете вертикално подравняване за елементи на ниво блок в специфични контексти.

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

13. Вертикално подравняване в таблици:

Свойството vertical-align често се използва в клетки на таблица (), за да контролирате подравняването на съдържанието в клетките.

модем срещу рутер

 td { vertical-align: middle; } 

14. Подравняване на вградени блокови елементи:

Можете да използвате вертикално подравняване, за да подравните вградени блокови елементи в ред от текст, например икони до текст.

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

Това са само няколко примера за работа с вертикално подравняване в различни сценарии. В зависимост от вашето конкретно оформление и изисквания може да се наложи да адаптирате или комбинирате тези техники, за да постигнете желаните резултати. CSS предоставя различни инструменти за ефективно справяне с вертикалното подравняване в различни контексти.

Не забравяйте, че докато свойството за вертикално подравняване има приложения, съществуват по-изчерпателни решения за всички сценарии за подравняване, особено елементи на ниво блок. За по-сложни оформления и изисквания за подравняване се препоръчва изследване на съвременни техники за CSS оформление като Flexbox, CSS Grid или дори стойности на CSS позиция (като абсолютни и относителни), за да постигнете желаните резултати по-ефективно и предвидимо.

Не забравяйте, че „vertical-align“ засяга само елементи на вградено ниво или клетки на таблица. Използвайте техники като flexbox, мрежово оформление или позициониране, за да подравните елементи на ниво блок вертикално.

Още няколко примера

 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. 

Изход

Предимства на вертикалното подравняване в CSS

Лесен за използване за вградени елементи:Свойството vertical-align е лесно за подравняване на елементи, като изображения, икони или текст, в рамките на ред от текст или други елементи.Поддръжка на широк браузър:Свойството vertical-align има добра поддръжка на браузъра и се поддържа широко в различни браузъри.Множество опции за подравняване:Той предоставя различни опции за подравняване, като базова линия, средна, горна, долна, текст отгоре, текст отдолу, долен индекс и горен индекс, което дава на разработчиците гъвкавост при подравняване на елементи въз основа на техните изисквания.Отзивчиво подравняване:Може да се използва в адаптивен дизайн за адаптиране на вертикалното подравняване въз основа на размера на контейнера или наличното пространство.Простота за вградени елементи:За подравняване на малки елементи като икони или изображения в ред от текст, свойството vertical-align осигурява сравнително просто решение, без да изисква сложни техники за оформление.Фина настройка:Свойството позволява фина настройка на вертикалната позиция на елементите, което може да бъде полезно за постигане на специфични дизайнерски цели.Съвместимост с клетките на таблицата:В контекста на таблиците, свойството vertical-align контролира подравняването на съдържанието в клетките на таблицата. Това може да помогне за поддържане на последователност в базираните на таблици оформления.Комбиниране с текст:Той ефективно подравнява елементи с текстово съдържание, като например подравняване на икони или вградени етикети със съседен текст.Поддържане на пропорции:Когато подравнявате изображения или икони в ред от текст, вертикалното подравняване може да помогне за поддържане на съотношението на тези елементи, особено когато се комбинира с подходящ размер на шрифта и височина на реда.Поправки за бързо подравняване:Когато се нуждаете от бързи корекции за проблеми с вертикалното подравняване, особено в сценарии със смесено съдържание, вертикалното подравняване може да осигури бързо решение, без да изисква обширно преструктуриране на оформлението.CSS имейл стил:В HTML имейли, където сложните оформления трябва да бъдат по-добре поддържани, използването на вертикално подравняване може да бъде полезно за основно вертикално подравняване на елементи, без да се разчита на външни таблици със стилове или сложни техники.Съвместим с дисплей:inline-block: Свойството vertical-align е съвместимо с inline-block елементи, което позволява лесно вертикално подравняване на такива елементи в линия.Поддържане на последователност:За елементи, които са част от таблични данни или трябва да се подравнят със сходни елементи в различни редове или колони, вертикалното подравняване може да помогне за поддържане на визуална последователност.Съвместимост на браузъра:За разлика от някои по-нови CSS техники, вертикалното подравняване е част от CSS от дълго време и се радва на добра съвместимост между различни браузъри.

Недостатъци на вертикалното подравняване в CSS

Ограничено до вградени елементи:Най-същественото ограничение на свойството vertical-align е, че работи само за елементи на вградено ниво или клетки на таблица. Не се прилага директно към елементи на ниво блок. Това може да направи вертикалното подравняване по-предизвикателно за по-големи елементи или сложни оформления.Непоследователно поведение:Вертикалното подравняване може да бъде трудно и непоследователно, особено с различни размери на шрифта, височини на редове и вложени елементи. Една и съща стойност на вертикално подравняване може да доведе до различни резултати въз основа на контекста.Странности на браузъра:Някои по-стари браузъри може да имат противоречиви интерпретации или странности със свойството vertical-align, което може да доведе до неочаквани резултати. Този проблем обаче се подобри с напредването на съвременните браузъри.Ограничен контрол върху разстоянието:Свойството vertical-align основно се занимава с вертикално подравняване на елементи, но предлага само малък контрол върху разстоянието между елементите. Коригирането на разстоянието често изисква допълнителни CSS или HTML модификации.Flexbox и Grid като алтернативи:За по-сложни изисквания за оформление и вертикално подравняване на елементи на ниво блок разработчиците често разчитат на Flexbox или CSS Grid, които предоставят по-стабилни и предвидими решения.Не е подходящ за пълно центриране:Въпреки че вертикалното подравняване е полезно за вертикално подравняване на вградени елементи, то е подходящо за напълно центрирани (хоризонтално и вертикално) елементи на ниво блок с допълнителни CSS техники.Подвеждащо име:Името „vertical-align“ може да бъде подвеждащо, защото не подравнява елемента вертикално по начина, по който разработчиците често очакват. Вместо това, той контролира подравняването на съдържанието на елемента в полето за линия.Сложност с различни шрифтове:Поведението на вертикалното подравняване може да бъде непредвидимо, когато се работи с елементи с различни размери на шрифта и височина на реда. Това може да направи последователното вертикално подравняване предизвикателство.Ограничено за сложни оформления:Не е подходящо за сложни оформления или сценарии, при които трябва да подравните вертикално по-големи елементи на ниво блок в родителски контейнер.Съвместимост между различни браузъри:Въпреки че модерните браузъри имат подобрена поддръжка за вертикално подравняване, по-старите браузъри все още могат да показват несъответствия или неочаквано поведение.Алтернативни техники:Съвременните техники за оформление на CSS като Flexbox и CSS Grid предлагат по-мощни и предвидими начини за справяне със сложни изисквания за оформление, включително вертикално подравняване както на вградени елементи, така и на елементи на ниво блок.Съображения за достъпност:Използването на вертикално подравняване за оформление може да не е най-достъпният подход, тъй като може да попречи на екранните четци и други помощни технологии. Семантичният HTML и правилните CSS техники често са по-добър избор за достъпност.Предизвикателства при отстраняване на грешки:Отстраняването на грешки при неочаквано поведение или проблеми с подравняването, свързани с вертикалното подравняване, понякога може да бъде трудно, особено когато се работи с вложени елементи и различни размери на шрифта.Еволюция на уеб оформлението:Тъй като пейзажът на уеб разработката се развива, новите техники за оформление като CSS Grid Layout и Flexbox предоставят по-модерни и всеобхватни решения за предизвикателствата на оформлението, като потенциално правят вертикалното подравняване по-малко подходящо за много сценарии.

Като цяло, докато свойството за вертикално подравняване е удобно за подравняване на вградени елементи или клетки на таблица в ред от текст, разработчиците често се нуждаят от други CSS техники за по-разширено оформление и изисквания за позициониране, особено когато се занимават с елементи на ниво блок или сложни оформления. CSS Flexbox и CSS Grid са мощни алтернативи за по-широко подравняване и контрол на позиционирането.

Заключение

Свойството vertical-align е полезно за подравняване на вградени елементи в текст или клетки на таблица. Той обаче има ограничения и може да бъде предизвикателство за ефективно използване за сложни оформления или елементи на ниво блок. Разработчиците трябва да обмислят модерни техники за CSS оформление, които осигуряват повече контрол и гъвкавост при подравняване и позициониране.