CSS от A до Z как да центрирате вертикално текст и икони
V означава вертикално центриране на текст и икони
Използвайте свойството line-height за просто вертикално центриране
За да центрирате вертикално един ред текст или икона в контейнер, можете да използвате свойството line-height. Свойството променя височината на ред текст чрез добавяне на равни подложки над и под контейнера с вградени елементи. Ако височината на контейнера е известна, тогава дъщерните елементи могат да бъдат вертикално центрирани чрез задаване на свойството line-height на тази височина.
Практически курс за оформление на адаптивен уебсайт от нулата!
Вземете курса и научете как да създавате модерни уебсайтове в HTML5 и CSS3
Гъвкаво центрирайте елементите вертикално със свойства за позициониране и трансформиране
Методът с височина на линията е патерица, която също разчита на фиксирана височина. Опитвам се да избягвам изрични стойности на височината, защото в отзивчиви проекти текстът може да се изпълнява зад блока в този случай. Този метод е много тромав, особено ако работите с произволни елементи и височина на течността.
Можете да използвате свойствата за позиция и трансформация, за да центрирате елементи с произволни вертикални височини. Например, за да центрирате елемент на височината на целия прозорец на браузъра, можете да използвате следния код:
Първо задаваме контекста на позициониране на контейнера със свойството position: relative. По този начин можем да поставим елемента .vertical-center вътре в границите на контейнера.
След това позиционираме горния ляв ъгъл на елемента точно в центъра на контейнера. За да направим това, задаваме отместването на горната и лявата граница на елемента на 50% спрямо родителя.
В края елементът се измества наляво и нагоре с 50% от височината и ширината си. Имамевертикално центриран елемент. Използвахме процентни стойности, което означава, че ако ширината или височината на контейнера или дъщерния елемент се промени, самият елемент пак ще остане точно в центъра.
Центрирайте елементите вертикално с flexbox
Предишният метод за вертикално центриране на елементи използва стандартния модел на кутия и техники за позициониране. Работи в IE9+, но ако трябва да поддържате браузъри IE10+, можете да го направите в много по-малко редове код с flexbox.
Начинът, по който оформлението е представено във flexbox, е много различно, но една от силните му страни е, че може да подравнява елементи вертикално и хоризонтално. За да центрирате елемент с помощта на flexbox, трябва да напишете следния код: