Мисля, че много от вас, които са се сблъсквали с оформлението, са се сблъсквали с необходимостта да подравняват елементите вертикално и знаят трудностите, които възникват при подравняването на елемент към центъра.
Да, има специално многостойностно свойство vertical-align в CSS за вертикално подравняване. На практика обаче изобщо не работи според очакванията. Нека се опитаме да разберем това.
Нека сравним следните подходи. Подравнете с помощта на:
- маси,
- отстъп,
- височина на реда
- разтягане,
- отрицателен марж,
- трансформирам
- псевдо елемент
- flexbox.
Има два елемента div, като единият е вложен в другия. Да им дадем съответните класове – външни и вътрешни.
Предизвикателството е да подравните вътрешния елемент с центъра на външния елемент.
Първо, нека разгледаме случая, когато размерите на външните и вътрешните блокове известен. Нека добавим правилото display: inline-block към вътрешния елемент и text-align: center и vertical-align: middle към външния елемент.
Не забравяйте, че подравняването се прилага само за елементи, които имат вграден режим или режим на вграден блок.
Нека зададем размерите на блоковете, както и цветовете на фона, така че да можем да видим границите им.
Външен (ширина: 200px; височина: 200px; подравняване на текст: център; вертикално подравняване: средата; цвят на фона: #ffc;) .inner (дисплей: вграден блок; ширина: 100px; височина: 100px; цвят на фона : #fcc )
След като приложим стиловете, ще видим, че вътрешният блок е подравнен хоризонтално, но не и вертикално:
http://jsfiddle.net/c1bgfffq/
Защо се случи това?Работата е там, че свойството vertical-align влияе върху подравняването самият елемент, а не неговото съдържание(освен когато се прилага към клетки на таблица). Следователно прилагането на това свойство към външния елемент не доведе до нищо. Освен това прилагането на това свойство към вътрешен елемент също няма да направи нищо, тъй като вградените блокове са подравнени вертикално спрямо съседните блокове и в нашия случай имаме един вграден блок.
Има няколко техники за решаване на този проблем. По-долу ще разгледаме по-отблизо всеки от тях.
Подравняване с помощта на таблица
Първото решение, което идва на ум, е да замените външния блок с таблица от една клетка. В този случай подравняването ще се приложи към съдържанието на клетката, тоест към вътрешния блок.
http://jsfiddle.net/c1bgfffq/1/
Очевиден минус това решение– от семантична гледна точка е неправилно да се използват таблици за подравняване. Вторият недостатък е, че създаването на таблица изисква добавяне на друг елемент около външния блок.
Първият минус може да бъде частично премахнат чрез замяна на етикетите table и td с div и настройка на режима на показване на таблицата в CSS.
.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Външният блок обаче ще си остане маса с всички произтичащи от това последствия.
Подравняване с помощта на отстъп
Ако височините на вътрешния и външния блок са известни, тогава подравняването може да се зададе с помощта на вертикалните отстъпи на вътрешния блок, като се използва формулата: (H външен – H вътрешен) / 2.Външен (височина: 200px;) .вътрешен (височина: 100px; поле: 50px 0;)
http://jsfiddle.net/c1bgfffq/6/
Недостатъкът на решението е, че е приложимо само в ограничен брой случаи, когато са известни височините на двата блока.
Подравняване с помощта на височината на линията
Ако знаете, че вътрешният блок трябва да заема не повече от един ред текст, тогава можете да използвате свойството line-height и да го зададете равно на височината на външния блок. Тъй като съдържанието на вътрешния блок не трябва да се пренася във втория ред, препоръчително е също да добавите правилата white-space: nowrap и overflow: hidden.Outer (височина: 200px; line-height: 200px;) .inner (white-space: nowrap; overflow: hidden;)
http://jsfiddle.net/c1bgfffq/12/
Тази техника може да се използва и за подравняване на многоредов текст, ако предефинирате стойността на височината на реда за вътрешния блок и също така добавите правилата display: inline-block и vertical-align: middle.
Outer (височина: 200px; line-height: 200px;) .inner (line-height: normal; display: inline-block; vertical-align: middle;)
http://jsfiddle.net/c1bgfffq/15/
Минус този методе, че трябва да се знае височината на външния блок.
Подравняване с помощта на "разтягане"
Този метод може да се използва, когато височината на външния блок е неизвестна, но височината на вътрешния блок е известна.За да направите това ви трябва:
- задайте относително позициониране към външния блок и абсолютно позициониране към вътрешния блок;
- добавете правилата top: 0 и bottom: 0 към вътрешния блок, в резултат на което той ще се простира до цялата височина на външния блок;
- задайте вертикалната подложка на вътрешния блок на автоматично.
http://jsfiddle.net/c1bgfffq/4/
Идеята зад тази техника е, че задаването на височина за разтегнат и абсолютно позициониран блок кара браузъра да изчислява вертикалната подложка в еднакво съотношение, ако е зададено на auto.
Подравняване с отрицателен марж отгоре
Този метод е широко известен и се използва много често. Подобно на предишния, той се използва, когато височината на външния блок е неизвестна, но височината на вътрешния е известна.Трябва да настроите външния блок на относително позициониране, а вътрешния блок на абсолютно позициониране. След това трябва да преместите вътрешния блок надолу с половината от височината на външния блок отгоре: 50% и да го повдигнете нагоре с половината от неговата собствена височина margin-top: -H вътрешен / 2.
Outer (позиция: относителна; ) .inner (височина: 100px; позиция: абсолютна; top: 50%; margin-top: -50px; )
http://jsfiddle.net/c1bgfffq/13/
Недостатъкът на този метод е, че трябва да се знае височината на вътрешното тяло.
Подравняване с трансформация
Този метод е подобен на предишния, но може да се използва, когато височината на вътрешното тяло е неизвестна. В този случай, вместо да зададете отрицателна пикселна подложка, можете да използвате свойството transform и да преместите вътрешния блок нагоре, като използвате функцията translateY и стойност от -50%.Външен ( позиция: относителна; ) .вътрешен ( позиция: абсолютна; горна: 50%; трансформация: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
Защо беше невъзможно да се зададе стойността като процент в предишния метод? Тъй като стойностите на процентния марж се изчисляват спрямо родителския елемент, стойност от 50% ще бъде половината от височината на външната кутия и ще трябва да повдигнем вътрешната кутия до половината от собствената й височина. Свойството transform е идеално за това.
Недостатъкът на този метод е, че не може да се използва, ако вътрешното тяло има абсолютно позициониране.
Подравняване с Flexbox
Най-модерният начин за вертикално подравняване е използването на гъвкаво оформление на кутията (популярно известно като Flexbox). Този модул ви позволява гъвкаво да контролирате позиционирането на елементите на страницата, като ги подреждате почти навсякъде. Централното подравняване за Flexbox е много проста задача.Външният блок трябва да бъде настроен на display: flex, а вътрешният блок на margin: auto. И това е всичко! Красиво, нали?
Външен ( дисплей: гъвкав; ширина: 200px; височина: 200px; ) .inner (ширина: 100px; поле: автоматично; )
http://jsfiddle.net/c1bgfffq/14/
Недостатъкът на този метод е, че Flexbox се поддържа само от модерни браузъри.
Кой метод да избера?
Трябва да започнете от изложението на проблема:- За вертикално подравняване на текст е по-добре да използвате вертикални отстъпи или свойството line-height.
- За абсолютно позиционирани елементи с известна височина (например икони), методът с отрицателно свойство margin-top е идеален.
- За повече сложни случаиКогато височината на блока е неизвестна, трябва да използвате псевдо елемент или свойството transform.
- Е, ако имате толкова късмет, че не е необходимо да поддържате по-стари версии на браузъра IE, тогава, разбира се, е по-добре да използвате Flexbox.
Тагове: Добавете тагове
Оформлението и централното подравняване на страниците на уебсайта е творческо начинание и често създава затруднения на начинаещите. Така че нека да видим как да го направим. Да кажем, че искаме да направим страница със следната структура:
Нашата страница се състои от четири блока: заглавка, меню, съдържание и долен колонтитул. За да центрираме страницата, ще поставим тези четири блока в един основен блок:
Хедър на сайта
Съдържание
Долната част на сайта
Използвайки тази структура като пример, ще разгледаме няколко опции.
Оформление и центриране на гумена площадка
При оформянето на гумена площадка основната използвана единица за измерване е -%, тъй като площадката трябва да се простира по ширина и да заема цялото свободно пространство.
Следователно ширината на блоковете "header" и "footer" ще бъде 100% от ширината на екрана. Нека ширината на блока "меню" е 30%, а блокът "съдържание" трябва да бъде разположен до блока "меню", т.е. трябва да има ляво поле (margin-left) с ширина, равна на ширината на блока "меню", т.е. 30%.
За да направите блоковете "меню" и "съдържание" един до друг, нека направим блока "меню" плаващ и го бутнете до левия ръб. Ще зададем и фоновите цветове за нашите блокове. Сега нека напишем всичко това в листа със стилове (на страницата style.css)
#header( background:#3e4982; width:100%; height:110px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu(background:#6173cb; float :left; width:300px; text-align:center; #content(background:#ffffff; margin-left:30%; height:text-align:center; ) #footer(фон: #3e4982; ширина: 50 пиксела; подравняване на текста: център; размер на шрифта: 10 пиксела)
Височината на блоковете беше зададена условно, така че резултатът да е видим. Вижте нашата страница във вашия браузър:
Ако промените размера на прозореца на браузъра, ширината на всички блокове ще се промени. Това не винаги е удобно, защото... Когато блокът на менюто е разтегнат, се появява празно място. Следователно ширината на блока „меню“ често е фиксирана, така че нека направим същото. За да направите това, заменете стойностите на съответните свойства в листа със стилове:
... #menu( background:#6173cb; float:left; width:200px; height:300px; ) #content( background:#ffffff; margin-left:200px; height:300px; ) ...
Сега нашата страница се простира по-естествено. При плавно оформление страниците заемат цялата ширина на екрана, така че не е необходимо подравняване на страницата.
Но ако желаете, можете да накарате страницата си да има еднаква подложка отляво и отдясно на екрана. За да направите това, трябва да добавите стил към "основния" блок, който е контейнер за всички останали блокове:
Сега страницата ни изглежда така:
Оформление и центриране на обекта, фиксирана ширина
В този случай ще трябва да зададем фиксирани размери за нашите блокове:
#main( width:800px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu ( background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer(background:#3e4982; clear:both; width:50px; text-align:center; font- size:14px; padding-top:10px )
Сега нашата страница е притисната до левия край на екрана.
В този случай централното подравняване на страниците на сайта може да се извърши по следния начин. Нека си припомним, че нашата страница има таг "body", на който също може да се даде ширина и малко подложка.
Нека направим това: дайте на тага "body" ширина от 800 пиксела (като "main" блок) и padding-left от 50%. След това цялото съдържание на "главния" блок ще се покаже от дясната страна на екрана (т.е. от средата надясно):
За да може нашият „главен“ блок да бъде разположен в средата на екрана, средата му трябва да съвпада със средата на тага „body“. Тези. трябва да преместите "основния" блок наляво с половината от неговия размер. Ширината на "основния" блок е 800 пиксела, което означава, че трябва да зададете свойството "margin-left:-400px" към него. Да, това свойство може да приема отрицателни стойности, тогава лявото поле се намалява (т.е. измества се наляво). И точно това ни трябва.
Стиловата таблица сега изглежда така:
body( width:800px; padding-left:50%; ) #main( width:800px; margin-left:-400px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center ; цвят: #FFFFFF; размер на шрифта: 40px; #menu(background:#6173cb; width:200px; height:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content(background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer(background:#3e4982; clear:both; width:800px;text-align:center;font-size:14px;
И нашата страница в браузъра се намира точно в средата:
Разгледахме две опции за центриране на страниците на сайта, всъщност те не са догма. Можете да експериментирате и да измислите своя собствена версия, просто проверете как работи в различни браузъри. За съжаление, това, което се показва добре във FireFox или Opera, може да се показва напълно неразбираемо в IE и обратно. И ние трябва да помним това.
Успех в творческите ви търсения!
Когато оформяте страница, често се налага подравняване CSS център-way: например центриране на основния блок. Има няколко варианта за решаване на този проблем, всеки от които рано или късно трябва да се използва от всеки дизайнер на оформление.
Централно подравняване на текста
Често за декоративни цели е необходимо да зададете подравняване на текста към центъра; в този случай CSS ви позволява да намалите времето за оформление. Преди това се правеше с помощта на HTML атрибути, но сега стандартът изисква текстът да бъде подравнен с помощта на таблици със стилове. За разлика от блоковете, за които трябва да промените полетата, в CSS подравняванеЦентрирането на текста се извършва с помощта на един ред:
- подравняване на текст: център;
Това свойство се наследява и предава от родителя на всички потомци. Засяга не само текста, но и други елементи. За да направите това, те трябва да са вградени (например span) или inline-block (всички блокове, които имат зададено свойство display: block). Последната опция също ви позволява да променяте ширината и височината на елемента и да регулирате отстъпите по-гъвкаво.
Често на страниците подравняването се присвоява на самия таг. Това веднага прави кода невалиден, тъй като W3C е отхвърлил атрибута align. Използването му на страница не се препоръчва.
Подравняване на блок към центъра
Ако трябва да центрирате div, CSS може да предложи доста удобен начин: използвайте външни полета. Отстъпите могат да се задават както за блокови елементи, така и за вградени блокови елементи. Стойността на свойството трябва да бъде 0 (вертикална подложка) и auto (автоматична хоризонтална подложка):
- margin:0 auto;
Сега тази опция се признава за абсолютно валидна. Използването на външна подложка също ви позволява да настроите изображението да бъде центрирано: това ви позволява да разрешите много проблеми, свързани с позиционирането на елемент на страницата.
Подравнете блок отляво или отдясно
Понякога централното подравняване на CSS не се изисква, но трябва да поставите два блока един до друг: единият отляво, другият отдясно. За тази цел има свойство float, което може да приема една от трите стойности: left, right или none. Да приемем, че имате два блока, които трябва да бъдат поставени един до друг. Тогава кодът ще бъде така:
- .left (float:left;)
- .right(float:right)
Ако има и трети блок, който трябва да се намира под първите два блока (например долен колонтитул), тогава той трябва да получи свойството clear:
- .left (float:left;)
- .right(float:right)
- долен колонтитул (изчистване: и двете)
Факт е, че блокове с класове ляво и дясно изпадат от общия поток, тоест всички останали елементи игнорират самото съществуване на подравнени елементи. Свойството clear:both позволява на долния колонтитул или който и да е друг блок да вижда елементи, които са изпаднали от потока, и забранява float отляво и отдясно. Следователно в нашия пример долният колонтитул ще се премести надолу.
Вертикално подравняване
Има моменти, когато не е достатъчно да зададете централно подравняване с помощта на CSS методи; трябва също да промените вертикалната позиция на дъщерния блок. Всеки вграден или вграден блоков елемент може да бъде вложен в горния или долния край, в средата на родителския елемент или на всяко място. Най-често блокът трябва да бъде подравнен към центъра; за това се използва атрибутът vertical-align. Да кажем, че има два блока, единият вложен в другия. В този случай вътрешният блок е inline-block елемент (показване: inline-block). Трябва да подравните дъщерния блок вертикално:
- подравняване отгоре - .child(vertical-align:top);
- централно подравняване - .child(vertical-align:middle);
- подравняване отдолу - .child(vertical-align:bottom);
включено блокови елементинито подравняването на текста, нито вертикалното подравняване нямат ефект.
Възможни проблеми с подравнени блокове
Понякога центрирането на div с помощта на CSS може да причини малко проблеми. Например, когато използвате float: да кажем, че има три блока: .first, .second и .third. Вторият и третият блок лежат в първия. Елементът с втори клас е подравнен вляво, а последният блок е подравнен вдясно. След изравняване и двамата изпаднаха от потока. Ако родителският елемент няма зададена височина (например 30em), тогава той вече няма да се разтяга до височината на дъщерните си блокове. За да избегнете тази грешка, използвайте „спейсър“ - специален блок, който вижда .second и .third. CSS код:
- .second(float:left)
- .third(float:right)
- .clearfix(височина:0; ясно: и двете;)
Псевдокласът:after често се използва, което също ви позволява да върнете блоковете на мястото им чрез създаване на псевдоспейсър (в примера div с контейнерния клас се намира inside.first и съдържа.left and.right) :
- .left(float:left)
- .right(float:right)
- .container:after(content:""; display:table; clear:both;)
Горните опции са най-често срещаните, въпреки че има няколко варианта. Винаги можете да намерите най-простия и удобен начин за създаване на псевдодистанционер чрез експериментиране.
Друг проблем, с който дизайнерите на оформление често се сблъскват, е подравняването на вградени блокови елементи. След всеки от тях автоматично се добавя интервал. Свойството margin, което е зададено на отрицателен отстъп, помага да се справите с това. Има и други методи, които се използват много по-рядко: например нулиране В този случай font-size: 0 е записано в свойствата на родителския елемент. Ако има текст вътре в блокове, тогава необходимият размер на шрифта вече е върнат в свойствата на елементите на вградения блок. Например font-size:1em. Този метод не винаги е удобен, така че опцията с външни отстъпи се използва много по-често.
Подравняването на блокове ви позволява да създавате красиви и функционални страници: това включва оформлението на цялостното оформление, подреждането на продуктите в онлайн магазините и снимките на уебсайта на визитната картичка.
здравей Нека продължим да овладяваме основите HTML език. Нека да видим какво трябва да напишете, за да подравните текста към центъра, ширината или краищата.
Като се заемем с работата, нека да разгледаме как да центрираме текста на три по различни начини. Последните две са свързани директно към листа със стилове. Това може да бъде CSS файл, който се свързва със страниците на сайта и определя външния им вид.
Метод 1 - директна работа с HTML
Всъщност е доста просто. Вижте примера по-долу.
Подравнете абзаца към центъра.
Ако имате нужда от движение текстови фрагментив противен случай вместо параметъра „center“ въвеждаме следните стойности:
- justify – подравняване на текста спрямо ширината на страницата;
- дясно – на десния ръб;
- ляво - наляво.
По аналогия можете да преместите съдържанието, което е в заглавките (h1, h2) и контейнера (div).
Метод 2 и 3 - използване на стилове
Представеният по-горе дизайн може леко да се трансформира. Ефектът ще е същият. За да направите това, трябва да напишете кода по-долу.
Текстов блок.
В тази форма кодът се записва директно в HTML, за да центрира текстовото съдържание.
Има и друг алтернативен начин за постигане на резултати. Ще трябва да направите няколко стъпки.
Стъпка 1. В основния код напишете
Текстов материал.
Стъпка 2. Във включения CSS файл въведете следния код:
Ровно (text-align:center;)
Отбелязвам, че думата „ровно“ е просто името на клас, който може да се нарича по различен начин. Това е оставено на преценката на програмиста.
По аналогия, в HTML можете лесно да направите текст центриран, подравнен и подравнен към десния или левия край на страницата. Както можете да видите, има много повече от една възможност да постигнете целта си.
Само няколко въпроса:
- Правите ли информационен проект с нестопанска цел?
- Искате ли вашият уебсайт да се справя добре? търсачки?
- Искате ли да печелите доходи онлайн?
Ако всички отговори са положителни, тогава просто погледнете интегриран подход към разработването на уебсайтове. Информацията ще бъде особено полезна, ако работи за CMS WordPress.
Бих искал да отбележа, че вашите собствени уебсайтове са само една от многото възможности за генериране на пасивен или активен доход в Интернет. Моят блог е посветен на финансовите възможности онлайн.
Работили ли сте някога в областта на трафик арбитража, копирайтинг и други области на дейност, които носят основната или допълнителен доходпо време на отдалечено сътрудничество? Можете да научите за това и много повече точно сега на страниците на моя блог.
Ще публикувам още доста в бъдеще полезна информация. Останете свързани. Ако желаете, можете да се абонирате за актуализации на Workip по имейл. Формата за абонамент се намира по-долу.
Днешната статия има за цел да ви покаже как да центрирате div, както хоризонтално, така и вертикално, като използвате няколко CSS трика. Ще ви кажем също как да центрирате цялата страница или в отделен div елемент.
Лесно центрирайте DIV елемент на страницата
Този метод ще работи перфектно във всички браузъри.
CSS
Center-div ( margin: 0 auto; width: 100px; )
Пример
Стойността auto в свойството margin задава лявото и дясното поле на цялото налично пространство на страницата. Важното нещо, което трябва да запомните тук е, че центрираният елемент div трябва да има зададена стойност за ширина.
Центриране на DIV вътре в DIV елемент по старомодния начин
Този метод на div за централно подравняване ще работи във всички браузъри.
CSS
Outer-div (padding: 30px; ) .inner-div ( margin: 0 auto; width: 100px; )
HTML
Пример
Външният div може да бъде поставен както желаете, но вътрешният div трябва да има определена ширина ( ширина).
Центриране на DIV вътре в DIV елемент с помощта на inline-block
При този метод за центриране на div в div не е необходимо да се указва ширината на вътрешния елемент. Ще работи във всички модерни браузъри, включително IE8.
CSS
Outer-div (padding: 30px; text-align: center;) .inner-div (display: inline-block; padding: 50px;)
HTML
Пример
Свойството за подравняване на текст работи само върху вградени елементи. Стойността на inline-block позволява на вътрешния div да бъде показан като вграден елемент, а също и като блок ( вграден блок). Свойството text-align на външния елемент div ще ни позволи да центрираме вътрешния div.
Центрирайте DIV вътре в DIV елемент хоризонтално и вертикално
Тук margin: auto се използва за центриране на div в центъра на страницата. Примерът ще работи във всички съвременни браузъри.
CSS
Outer-div (padding: 30px; ) .inner-div ( margin: auto; width: 100px; height: 100px; )
HTML
Пример
Вътрешният елемент div трябва да има определена ширина ( ширина) и височина ( височина). Методът няма да работи, ако външният елемент div има фиксирана височина.
Центрирайте DIV в долната част на страницата
Тук margin: auto се използва за центриране на div вертикално, а абсолютното позициониране се използва за външния елемент. Методът ще работи във всички съвременни браузъри.
CSS
Outer-div (позиция: абсолютна; дъно: 30px; ширина: 100%; ) .inner-div (марж: 0 автоматично; ширина: 100px; височина: 100px; цвят на фона: #ccc;)
HTML
Пример
Вътрешният div трябва да има зададена ширина. Пространството в долната част на страницата се коригира с помощта на свойството bottom на външния div. Можете също така да центрирате div в горната част на страницата, като замените свойството bottom с горното свойство.
Центрирайте DIV на страницата вертикално и хоризонтално
Тук, за центриране на div, ние отново използваме margin: auto и абсолютно позициониране на външния div. Методът ще работи във всички съвременни браузъри.
CSS
Center-div (позиция: абсолютна; поле: автоматично; горе: 0; дясно: 0; долно: 0; ляво: 0; ширина: 100px; височина: 100px; )
Пример
Елементът div трябва да има зададена ширина ( ширина) и височина ( височина).
Правене на адаптивно центриране на DIV елемент върху страницата
Тук за подравняване на divВ центъра, използвайки CSS, правим ширината на елемента div адаптивна, така че да реагира на промените в размера на прозореца. Този метод работи във всички браузъри.
CSS
Center-div ( margin: 0 auto; max-width: 700px; )
Пример
Центриран div елемент трябва да има зададено свойство max-width.
Центриране на DIV вътре в елемент чрез свойствата на вътрешния блок
Вътрешният елемент div тук е отзивчив. Този метод за центриране на div вътре в div ще работи във всички браузъри.
CSS
Outer-div (padding: 30px; ) .inner-div ( margin: 0 auto; max-width: 700px; )
HTML
Пример
Вътрешният div трябва да има зададено свойство max-width.
Центриране на два отзивчиви div един до друг
Тук имаме два отзивчиви div елемента един до друг. Този метод за поставяне на div в центъра на екрана ще работи във всички съвременни браузъри.
CSS
Контейнер ( подравняване на текст: център; ) .left-div ( дисплей: вграден блок; максимална ширина: 300px; вертикално подравняване: отгоре; ) .right-div ( дисплей: вграден блок; максимална ширина: 150px; ) екран и (максимална ширина: 600px) ( .left-div, .right-div ( lef max-width: 100%; ) )
HTML
Пример
Тук имаме няколко елемента с приложено свойство inline-block, разположени вътре в центриран контейнер. Този пример също използва CSS медийни заявки; тоест, ако размерът на екрана е по-малък от 600 пиксела, тогава свойството за максимална ширина за левия и десния div е зададено на 100%.
DIV елемент, центриран с помощта на Flexbox
Тук центрираме CSS div с помощта на Flexbox. Предназначен е да улесни процеса на разработване на дизайна потребителски интерфейси. Този модул се поддържа от Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+ и Браузър за Android 40+ .
CSS
Контейнер ( дисплей: flex; align-items: center; justify-content: center; height: 100vh; ) .item ( background-color: #f3f2ef; border-radius: 3px; width: 200px; height: 100px; )
