Вертикално подравняване - Медийното изображение - Уебсайтът се извършва

Направете текст или елемент вертикално центриран спрямо родителя, като използвате блоково оформление.

Когато използвате таблично оформление, не беше трудно да подравните елементите или текста в клетката, достатъчно беше да зададете свойството vertical-align: middle.

Както се оказва, елементите на ниво блок не могат, подобно на клетките на таблицата, да се подравнят вертикално. Но CSS ви позволява да промените поведението на елементите (свойството display), например, за да направите блок, който ще се държи като клетка от таблица - display: table-cell. Изглежда, че това е решението, просто и ясно, остава да добавите vertical-align: middle и можете да се насладите на резултатите от работата си. Но има браузър, обичан от всички уеб разработчици, който няма да ви позволи да се зарадвате толкова бързо - Interner Explorer. IE6 и IE7 не поддържат стойността на свойството display table-cell. Трябва да прибягвате до софтуерно решение (израз) за тези браузъри.

родителски блок, вътре в който ще има вертикално подравняване, задайте височина (височина), дисплей: клетка-таблица и вертикално-aling: средата - това ще бъде достатъчно за повечето браузъри
добавяме израз към елемента, който ще подравняваме - скрипт, който при зареждане на страницата ще определя колко трябва да направи отстъп отгоре (в зависимост от височината на родителя и собствената си височина), за да бъде вертикално подравнен в центъра (ако трябва да подравним текста, той ще трябва да бъде затворен в допълнителен контейнер). Този трик е за IE6 и IE7

Например, нека подравним абзац от текста:

родителят не трябва да е плаващ (float: left/right), т.к плаващите елементи автоматично стават блокови елементи
родител не трябва да е абсолютен или фиксиранпозициониране (позиция: абсолютна/фиксирана)
елементът, който е центриран (child, в примерите е span и img) трябва да е на ниво блок, необходимо е за IE6 и IE7, т.к. подложката отгоре/отдолу работи само за блокови елементи

Метод на вграден блок

Тази опция също използва display: table-cell; и вертикално подравняване: средата; за всички нормални браузъри. Разликата е, че за IE6-7 използваме различно лекарство - добавяме вграден блок, който ще осигури централно подравняване. За да не задръстваме кода с допълнителен блок, ще го добавим, като използваме псевдоелементната емулация преди.

Метод без израз

Ако използвате допълнителен контейнер, можете да направите без израз. Вярно е, че в този случай ще е необходимо отново да разделите стиловете за по-младите версии на IE и нормалните браузъри.