Седем методи подреждането при използване CSS
Центриране елементи хоризонтално на страницата, изглежда, е най-лесният, докато изпълнява вертикално подравняване по-трудно и най-трудното - комбинацията от тези два проблема. С адаптивен дизайн, ние рядко знаем точната височина или ширина на елементите, което премахва многото възможности. Както изчислява, остава най-малко шест методи за центриране в CSS. Ще започна с най-лесният и най-добрият подкрепена и преминете към най-сложните, които работят по един основен източник:
HTML5 и CSS3 практика от нула до резултата!
Снимки на обувки ще са различни, но винаги ще остане в оригиналния му размер 500px × 500 пиксела. Цвят модел HSL ( «Hue Saturation--Brightness" се прилага за фоновете да се поддържа стабилна цветова тема.
Хоризонтално центриране с помощта на текстови подравняването
Понякога най-доброто решение е очевидна:
Тя не приведе изображението вертикално: за да го постигнем, ще трябва да добавите запълване на Разделение или марж-отгоре и долна граница за съдържанието му, оставяйки възможност да получите височината на съда от неговото собствено съдържание.
Центриране Използването марж: автоматичен
И пак, най-вече за хоризонтално подравняване, и със същите ограничения, които по-горе метод с текст-подравняване:
Обърнете внимание на дисплея: блок, в този случай е необходимо да се гарантира, че изображението се марж: 0 автомобил.
Центриране на маса клетка
Нанесете дисплей: маса клетки, отколкото оформление истинска маса; Тя позволява хоризонтално и вертикално центриране. Обикновено изисква добавяне и манипулирането на втори външен елемент, който може да бъде всичко - от Разделение към тялото.
Забележете, че ширината: 100% е необходимо, за да се предотврати съсирването Разделение и че външния контейнер за вертикално подравняване на съдържанието ще изисква определена височина. Опитът да се приведе в съответствие вертикално елемент на тялото, в допълнение, тя включва стандартна техника - височина на инсталиране и HTML тяло. Тя работи във всички браузъри, включително Internet Explorer 8 +.
абсолютна центриране
Наскоро въведена Стивън Шоу (Стивън Шоу) техниката е добре подкрепен от браузъри. Единственият недостатък на това е, че височината трябва да бъде обявена в някаква форма на външната страна на контейнера:
Центриране използване превежда
Новата техника Koyera Крис (Chris Coiyer), като се използват CSS реализация. Също така поддържа хоризонтално и вертикално центриране:
HTML5 и CSS3 практика от нула до резултата!
Той има няколко недостатъка:
промени CSS код, за да работят във всички браузъри изискват префиксите на продавача версия
Не работи в по-старите версии на IE (версия 8 и нагоре)
Външният контейнера ще трябва да настроите височината (или го получи по друг начин), тъй като неговото съдържание е абсолютно позициониран, той няма да получи всякаква височина.
Ако съдържанието е текст, сегашните методи за оформление на браузъра могат да направят преведения текст размита.
Центриране използване flexbox
Може би най-лесното решение ще бъде центриран след изчезването на свойствата и опциите продавач версия Представката на.
В много отношения, най-простото решение, но много пент-стария синтаксис и липсата на подкрепа за стари версии на IE (въпреки дисплея: мине за приемлива алтернатива маса клетки). Пълен CSS:
Сега спецификацията вече е свършила, и да зададете подкрепа браузър, и ще разкрие flexbox собственост и използването му в един бъдещ член.
Центриране използване изчислено
По-гъвкав, отколкото flexbox, при определени обстоятелства:
Това е много проста, изчислено ви дава възможност да направи изчисления въз основа на текущата й оформление. В горния прост изчисляването на 50% - на средата, съдържащ елемент, но прилагането му към индивидуално определен в горния ляв ъгъл на изображението в центъра на DIV. Ние трябва да донесе тази позиция обратно на половината от ширината и половината от височината на изображението. Да го кажем в неговата цялост:
Ще откриете, че в последните версии на браузърите, тази техника не изглежда да работи най-добре на съдържанието на фиксираните известни размери:
И отново, аз ще обсъди в бъдеща статия изч. Тази техника е почти същите потенциални недостатъци, които flexbox: докато има добра подкрепа в Firefox, от версия 4, в по-ранните версии на браузъра изисква продавач версия представки и абсолютно никаква подкрепа в IE 8. изображението в пълен код ще бъде :
Въпреки че има функции, като например използването на псевдо-вертикално подравняване, разбиране на тези шест техники създават всеки уеб разработчик твърдо асортимент, можете да разчитате на, когато центриране елементи.
Редакция: Екип webformyself.
HTML5 и CSS3 практика от нула до резултата!
Най-IT новини и уеб разработки на нашия канал Телеграма
