6 CSS трикове за вертикално подреждане на съдържанието

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

Тези трикове обаче могат да имат ограничения и може да се наложи използвайте повече от един трик за да завърши илюзията. Ако знаете за някакъв друг трик, уведомете ни в коментарите.

1. Използвайте Абсолютно позициониране

Първият трик, който ще видим тук, използва позиция Имот. Имате две

, единият е контейнерът, а другият е детският елемент, който съдържа съдържанието.

Първо ще зададем позицията на контейнерния елемент на относително, след което ще зададем положението на детския елемент абсолютен. Това ни позволява свободно да го поставяме през контейнера.

За да я подравните вертикално, преместете позицията на детския елемент отгоре, наполовина на височината на контейнера и го издърпайте нагоре с половината от ширината на детския елемент. Ето изхода:

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

2. Използвайте CSS3 Transform

CSS3 Transform улеснява поставянето на съдържание в центъра. CSS3 Transform, за разлика от позиция не засяга позицията на други елементи в същия контейнер.

Ако приемем, че имаме същата HTML структура като предходния метод - един родител, един детски елемент - 50% отгоре и използвайки CSS преобразуването дава превод на -50%. И там го имаш.

Имайте предвид обаче, че CSS3 Transforms няма да работи в Internet Explorer 8 и по-долу. Може да искате да използвате някой от другите методи тук като резервен.

3. Използвайте Padding

Можем също да използваме подложка да създаде илюзия за вертикално подравняване. За да направите това, просто поставете горната и долната подложка еднакво, както следва:

Този трик е подходящ, когато не поставите контейнера във фиксирана ширина, просто задайте ширината на Автоматичен.

4. Използвайте Line Height

Ако имате само един ред текстово съдържание в контейнер, можете да подравните текста вертикално с помощта на височина на линията Имот. Нагласи височина на линията стойност за приблизително същата като височината на контейнера и ще видите следния изход.

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

5. Използвайте CSS таблицата

Лично, използването на CSS Table е любимият ми трик за прилагане на вертикално подравняване. Работи в стари браузъри като Internet Explorer 8. Този метод се извършва чрез задаване на показване на елемента на контейнера маса, докато детето елемент трябва да се показва като маса клетка след това използвайте вертикално подравняване собственост за центриране на текста вертикално.

6. Използвайте Flexbox

Последният метод за вертикално центриране е чрез използване на Flexbox. Flexbox е нов модул в CSS3. Той предлага по-ясен метод за подравняване на съдържанието. За да центрирате съдържанието вертикално във флекс-кутията, просто добавете align-items: център; както следва, и това е всичко.

Имайте предвид, че Flexbox някои браузъри поддържат само частични функции на модула Flexbox като Internet Explorer 10, Safari, 6 и Chrome 27 и по-долу. Следователно, подобно на трика с CSS3 Transform, уверете се, че ефектът попада добре в тези браузъри.