Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Светият Граал на CSS центрирането

by
Difficulty:BeginnerLength:ShortLanguages:

Bulgarian (Български) translation by Mihail Petrov (you can also view the original English article)

Chris Coyier, наскоро публикува в своя сайт CSS Tricks, списък с подходи, демонстриращи множеството начини за хоризонтално и вертикално центриране на текст с помощта на CSS. Всеки един от тези методи, има своите минуси, но ако ги използваме комбинирано, получаваме функционален инструмент за центриране на съдържание, който може да се ползва във всички браузъри от IE8 нагоре.

Нека видим как да го постигнем

Основни класове

За целите на този пример ще ползваме процентни стойности за размерите на елементите. Нека създадем един обикновен елемент с клас .container.

Ще добавим няколко допълнителни стила, гарантиращи правилното разпъване на съдържащият елемент: html, body { width: 100%; height: 100%; }

Добавяне на табличен шаблон

За да постигнем вертикално центриране, ще добавим шаблон за таблична визуализация, в рамките на класа .container. Този шаблон ще накара елементите с блокова визуализация да се държат като клетки на таблица, което ни дава достъп и до вертикално центриране.

Накрая, ще добавим и хоризонтално центриран елемент.

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

Добавяне на промени

За да променим хоризонталното центриране на елемента, е необходимо просто да модифицираме свойството text-align, на класа .inner. По същият начин за вертикалното центриране, променяме свойството vertical-align.

Заключение

Изглежда, че в разгледаните примери, използваме доста HTML код, но същността на техниката се състои само от три div елемента с класове съответно :.outer, .inner, и .centered.

Надявам се че тази техника ще стане стандартен подход при центриране на елементи със CSS

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.