Центрирано html местоположение. Вертикално подравняване в div

Добър ден, абонати и читатели на тази публикация. Днес искам да навляза в подробности и да ви кажа как да центрирате текст в CSS. В някои предишни статии косвено засегнах тази тема, така че имате известни познания в тази област.

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

Html и неговото потомство и подравнете

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

Що се отнася до валидирането (този термин е описан подробно в статията ""), самата html спецификация осъжда използването< center>, тъй като за валидност е необходимо да се използва преходният DOCTYPE> .

Този тип позволява преминаването на забранени елементи.

ЦЕНТЪР

Това съдържание ще бъде центрирано.

Моля, обърнете внимание, че за изображението атрибутът, който анализираме, има малко по-различни значения.

В примера използвах align=" middle" . Благодарение на това изображението беше подравнено така, че изречението да е разположено ясно в средата на картината.

Инструменти за центриране в css

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

И така, нека започнем с първото свойство за центриране на текст - подравняване на текст.

Функционира по същия начин като align in . Сред ключовите думи можете да изберете една от общия списък или да наследите характеристиките на предшественик (наследяване).

Бих искал да отбележа, че в css3 можете да зададете още 2 параметъра: начало – в зависимост от правилата за писане на текст (отдясно наляво или обратно) задава подравняването наляво или надясно (подобно на работата наляво или надясно) и край – обратното на начало (при писане на текст отляво надясно работи като дясно, когато се пише отдясно наляво - ляво).

подравняване на текст div ( граница: 5px двойно червено; подложка: 0 22px 0 22px; ) #l ( подравняване на текст: надясно; ) #s ( подравняване на текст: край; )

Изречение вдясно

Изречение с край

Ще ви разкажа за един малък трик. Когато е избрано оправдаване, последният ред може да виси непривлекателно отдолу. За да го позиционирате например в центъра, можете да използвате свойството text-align-last.

За да подравните вертикално съдържанието на сайта или клетките на таблицата, използвайте свойството vertical-align. По-долу съм описал основните ключови думи на елемента.

Ключова дума	Цел
базова линия	Указва подравняване към предшестваща линия, наречена базова линия. Ако обектът-предшественик няма такава линия, тогава подравняването се извършва по долната граница.
средата	Средата на мутиралия обект е подравнена спрямо основната линия, към която се добавя етажът на височината на родителския елемент.
отдолу	Долната част на избраното съдържание се настройва спрямо долната част на обекта под него.
отгоре	Подобно на дъното, но с горната част на обекта.
супер	Прави знака горен индекс.
суб	Прави елемента долен индекс.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

вертикално подравняване ЦВЕТЕ

вертикално подравняване div( размер на шрифта: 4em; подравняване на текст: център; украса на текст: подчертаване; ) #A(вертикално подравняване: отгоре;) #B(вертикално подравняване: по средата;) #C(вертикално подравняване : супер;) #D(vertical-align: sub;) ЦВЕТЕ

Вдлъбнатини

И накрая стигаме до отстъпите на параграфите. Езикът CSS използва специално свойство, наречено text-indent.

С негова помощ можете да направите както червена линия, така и издатина (трябва да посочите отрицателна стойност).

text-indent #a ( text-indent: 53px; ) #b ( text-indent: -43px; ) div ( background: #FFDAB9; width:35%; font-size:29px; margin-left: 30%; padding -ляво:50px;

За да създадете червена линия, трябва да знаете само един параметър.

Това е простото свойство за отстъп на текст.

Похвалявам тези, които опитаха всеки пример на практика. Изпратете връзки към моя блог на вашите приятели и не забравяйте да се абонирате. Успех! Чао чао!

С най-добри пожелания, Роман Чуешов

Прочетено: 675 пъти

Когато оформяте страница, често е необходимо да извършите центриране по метода CSS: например центриране на основния блок. Има няколко варианта за решаване на този проблем, всеки от които рано или късно трябва да се използва от всеки дизайнер на оформление.

Централно подравняване на текста

Често за декоративни цели е необходимо да зададете подравняване на текста към центъра; в този случай 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(height:0; clear: и двете;)

Псевдокласът: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. Този метод не винаги е удобен, така че опцията с външни отстъпи се използва много по-често.

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

От автора: Приветствам ви отново на страниците на нашия блог. В днешната статия бих искал да говоря за различни техники за подравняване, които могат да бъдат приложени както към блоковете, така и към тяхното съдържание. По-специално, как да подравнявате блокове в css, както и подравняване на текст.

Подравняване на блокове към центъра

В CSS центрирането на блок е лесно. Това е най-известната техника на мнозина, но бих искал да говоря за нея точно сега, преди всичко. Това означава хоризонтално центрирано подравняване спрямо родителския елемент. Как се прави? Да кажем, че имаме контейнер и нашият експериментален обект е в него:

< div id = "wrapper" > < div id = "header" > < / div > < / div >

Да приемем, че това е заглавката на сайта. Не се простира по цялата ширина на прозореца и трябва да го центрираме. Пишем така:

#заглавие( ширина/максимална ширина: 800px; марж: 0 авто;

Трябва да посочим точната или максималната ширина и след това да запишем свойството на ключа - margin: 0 auto. Той задава външните полета на нашата заглавка, първата стойност определя горното и долното поле, а втората определя дясното и лявото поле. Стойността auto казва на браузъра автоматично да изчисли подложката от двете страни, така че елементът да е точно центриран в родителя. Удобно!

Подравняване на текст

Това също е много проста техника. За да подравните всички вградени елементи, можете да използвате свойството text-align и неговите стойности: ляво, дясно, център. Последният центрира текста, което е това, от което се нуждаем. Можете дори да подравните картина по същия начин, защото тя също е вграден елемент по подразбиране.

Подравнете текста вертикално

Но това е по-сложно. По подразбиране няма просто, добре познато свойство, което лесно центрира текста вертикално в блоков контейнер. Има обаче няколко техники, които дизайнерите на оформление са измислили през годините.

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

div( фон: #ccc; подложка: 30px 0; )

div( фон: #ccc; подложка: 30px 0;

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

Определете височината на линията за блока. Мисля, че това е по-правилен начин, ако трябва да подравните един ред текст. С него можете да напишете височината според нормалното, като използвате свойството за височина. След това той също трябва да зададе височината на линията, същата като височината на блока като цяло.

div(височина: 60px; височина на линия: 60px; )

div( височина: 60px; височина на реда: 60px;

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

Преобразувайте блок в клетка на таблица. Същността на този метод е, че клетката на таблицата има свойството vertical-align: middle, което центрира елемента вертикално. Съответно в този случай блокът трябва да бъде настроен на следното:

div( дисплей: клетка-таблица; вертикално-подравняване: средата; )

div( дисплей: таблица - клетка; вертикално - подравняване: по средата;

Този метод е добър, защото можете да подравните колкото искате текст в центъра. Но е по-добре да напишете display: table към блока, в който е вложен нашият div, в противен случай може да не работи.

Е, стигаме до последната техника за днес - това е вертикалното подравняване на самите блокове. Трябва да се каже, че отново няма собственост, която да е предназначена специално за това, но има няколко трика, с които трябва да сте наясно.

Задайте отстъпи като процент. Ако знаете височината на родителски елемент и поставите друг блоков елемент вътре в него, можете да го центрирате, като използвате процентно подпълване. Например, родителят има височина 600 пиксела. Поставяте блок в него с височина 300 пиксела. Колко трябва да отстъпите отгоре и отдолу, за да го центрирате? 150 пиксела всеки, което е 25% от височината на родителя.

Този метод позволява подравняване само когато размерите позволяват изчисления. И ако вашият родител е с височина 887 пиксела, тогава няма да можете да запишете точно нищо, това вече е ясно.

Вмъкване на елемент в клетка на таблица. Отново, ако трансформираме родителския елемент в клетка на таблица, тогава блокът, вмъкнат в нея, ще бъде автоматично центриран вертикално. За да направите това, родителят просто трябва да зададе vertical-align: middle.

И ако в допълнение към това напишем още margin: 0 auto, тогава елементът ще стане хоризонтално центриран!

Центрирането на елементи вертикално с помощта на CSS е задача, която представлява известна трудност за разработчиците. Има обаче няколко метода за решаването му, които са доста прости. Този урок представя 6 опции за вертикално центриране на съдържание.

Нека започнем с общо описание на проблема.

Проблем с вертикално центриране

Хоризонталното центриране е много просто и лесно. Когато центрираният елемент е вграден, ние използваме свойството за подравняване спрямо родителския елемент. Когато елементът е на ниво блок, задаваме неговата ширина и автоматична настройка на ляво и дясно поле.

Повечето хора, когато използват свойството text-align:, се позовават на свойството vertical-align за вертикално центриране. Всичко изглежда съвсем логично. Ако сте използвали шаблони за таблици, вероятно сте използвали широко атрибута valign, който засилва убеждението, че вертикалното подравняване е правилният начин за решаване на проблема.

Но атрибутът valign работи само върху клетки на таблица. И свойството vertical-align е много подобно на него. Той също така засяга клетките на таблицата и някои вградени елементи.

Стойността на свойството vertical-align е относителна към родителския вграден елемент.

• В ред от текст подравняването е спрямо височината на реда.
• Клетката на таблицата използва подравняване спрямо стойност, изчислена чрез специален алгоритъм (обикновено височината на реда).

Но за съжаление, свойството vertical-align не работи на елементи на ниво блок (например параграфи в елемент div). Тази ситуация може да накара някой да мисли, че няма решение на проблема с вертикалното подравняване.

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

Метод на височината на линията

Този метод работи, когато искате да центрирате един ред текст вертикално. Всичко, което трябва да направите, е да зададете височината на реда да бъде по-голяма от размера на шрифта.

По подразбиране бялото пространство ще бъде разпределено равномерно в горната и долната част на текста. И линията ще бъде центрирана вертикално. Често височината на линията се прави равна на височината на елемента.

HTML:

Задължителен текст

CSS:

#child (line-height: 200px;)

Този метод работи във всички браузъри, въпреки че може да се използва само за един ред. Стойността 200 px в примера е избрана произволно. Можете да използвате всяка стойност, по-голяма от размера на шрифта на текста.

Центриране на изображение с помощта на височината на линията

Ами ако съдържанието е картина? Ще работи ли горният метод? Отговорът се крие в още един ред CSS код.

HTML:

CSS:

#parent (line-height: 200px;) #parent img (vertical-align: middle;)

Стойността на свойството line-height трябва да е по-голяма от височината на изображението.

CSS табличен метод

По-горе беше споменато, че свойството vertical-align се използва за клетки на таблица, където работи чудесно. Можем да покажем нашия елемент като клетка на таблица и да използваме свойството vertical-align върху него, за да центрираме вертикално съдържанието.

Забележка: CSS таблица не е същата като HTML таблица.

HTML:

Съдържание

CSS:

#родител (дисплей: таблица;) #дете ( дисплей: клетка-таблица; вертикално подравняване: средата;)

Задаваме изхода на таблицата на родителския елемент div и извеждаме вложения елемент div като клетка на таблица. Вече можете да използвате свойството vertical-align на вътрешния контейнер. Всичко в него ще бъде центрирано вертикално.

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

Недостатъкът на този метод е, че не работи в по-стари версии на IE. Трябва да използвате свойството display: inline-block за вложения контейнер.

Абсолютно позициониране и отрицателни маржове

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

Примерният код извършва хоризонтално и вертикално центриране едновременно:

HTML:

Съдържание

CSS:

#parent (позиция: относителна;) #child (позиция: абсолютна; горе: 50%; ляво: 50%; височина: 30%; ширина: 50%; поле: -15% 0 0 -25%; )

Първо задаваме типа позициониране на елемента. След това задаваме горните и левите свойства на вложения div елемент на 50%, което съответства на центъра на родителския елемент. Но центърът е горният ляв ъгъл на вложения елемент. Следователно трябва да го повдигнете нагоре (половината от височината) и да го преместите наляво (половината от ширината), след което центърът ще съвпадне с центъра на родителския елемент. Така че познаването на височината на елемента в този случай е необходимо. След това задаваме елемента с отрицателни горни и леви полета, равни съответно на половината от височината и ширината.

Този метод не работи във всички браузъри.

Абсолютно позициониране и разтягане

Примерният код извършва вертикално и хоризонтално центриране.

HTML:

Съдържание

CSS:

#parent (позиция: относителна;) #child (позиция: абсолютна; горе: 0; долу: 0; ляво: 0; дясно: 0; ширина: 50%; височина: 30%; поле: автоматично; )

Идеята зад този метод е да се разтегне вложеният елемент до всичките 4 граници на родителския елемент, като се зададат свойствата отгоре, отдолу, отдясно и отляво на 0.

Задаването на полето за автоматично генериране от всички страни ще зададе равни стойности на всичките 4 страни и ще центрира нашия вложен div елемент върху неговия родителски елемент.

За съжаление, този метод не работи в IE7 и по-стари версии.

Равни пространства отгоре и отдолу

В този метод равното подплънка е изрично зададено в горната и долната част на родителския елемент.

HTML:

Съдържание

CSS:

#parent (padding: 5% 0; ) #child (padding: 10% 0; )

Примерният CSS код задава горна и долна подложка за двата елемента. За вложен елемент настройката на подложката ще служи за центрирането му вертикално. И подложката на родителския елемент ще центрира вложения елемент в него.

Относителните мерни единици се използват за динамично преоразмеряване на елементи. А за абсолютни мерни единици ще трябва да правиш изчисления.

Например, ако родителският елемент има височина 400px, а вложеният елемент е 100px, тогава са необходими 150px подложка отгоре и отдолу.

150 + 150 + 100 = 400

Използването на % ви позволява да оставите изчисленията на браузъра.

Този метод работи навсякъде. Недостатъкът е необходимостта от изчисления.

Забележка: Този метод работи чрез задаване на външната подложка на елемента. Можете също да използвате полета в елемент. Решението за използване на полета или padding трябва да се вземе в зависимост от спецификата на проекта.

плаващ div

Този метод използва празен елемент div, който плава и помага да се контролира позицията на нашия вложен елемент в документа. Имайте предвид, че плаващият div се поставя преди нашия вложен елемент в HTML кода.

HTML:

Съдържание

CSS:

#parent (височина: 250px;) #floater (float: ляво; височина: 50%; ширина: 100%; margin-bottom: -50px; ) #child (чисто: и двете; височина: 100px;)

Изместваме празния div наляво или надясно и задаваме височината му на 50% от неговия родителски елемент. По този начин ще запълни горната половина на родителския елемент.

Тъй като този div е плаващ, той се премахва от нормалния поток на документа и трябва да разопаковаме текста на вложения елемент. Примерът използва clear: both , но е напълно достатъчно да използвате същата посока като отместването на плаващия празен div елемент.

Горната граница на вложен div елемент е точно под долната граница на празен div елемент. Трябва да преместим вложения елемент нагоре с половината от височината на плаващия празен елемент. За да разрешите проблема, използвайте отрицателна стойност на свойство margin-bottom за плаващ празен елемент div.

Този метод също работи във всички браузъри. Използването му обаче изисква допълнителен празен елемент div и познаване на височината на вложения елемент.

Заключение

Всички описани методи са лесни за използване. Трудността е, че никой от тях не е подходящ за всички случаи. Трябва да анализирате проекта и да изберете този, който най-добре отговаря на изискванията.

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

Поле за хоризонтално подравняване: автоматично

Хоризонталното подравняване с марж се използва, когато ширината на центрирания елемент е известна. Работи за блокови елементи:

Elem ( margin-left: auto; margin-right: auto; width: 50%; )

Посочването на auto за дясното и лявото поле ги прави равни, което центрира елемента хоризонтално в рамките на родителския блок.

подравняване на текст: център

Този метод е подходящ за центриране на текст в блок. подравняване на текст: център:

Подравняване с text-align .wrapper ( text-align: center; )

Централно съм подравнен

позиция и отрицателно поле вляво

Подходящ за центриране на блокове с известна ширина. Даваме позиция на родителския блок: спрямо позицията спрямо него, позицията на центрирания елемент: абсолютна, ляво: 50% и отрицателно поле отляво, чиято стойност е равна на половината от ширината на елемента:

Подравняване с позиция .wrapper (позиция: относителна; ) .wrapper p ( ляво: 50%; марж: 0 0 0 -100px; позиция: абсолютна; ширина: 200px; )

Централно съм подравнен

дисплей: inline-block + text-align: center

Методът е подходящ за подравняване на блокове с неизвестна ширина, но изисква обвиващ родител. Например можете да центрирате хоризонтално меню по следния начин:

Подравняване с дисплей: inline-block + text-align: center;

• Начало
• .navigation (text-align: center; ) .navigation li ( display: inline-block; )

За автора

Вертикално подравняване височина на линията

За да подравните един ред текст, можете да използвате същата височина и стойности за разстояние между редовете за родителския блок. Подходящ за бутони, елементи от менюто и др.

line-height .wrapper (височина: 100px; line-height: 100px;)

Аз съм вертикално подравнен

позиция и отрицателен марж нагоре

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

Обвивка (позиция: относителна;) елемент (височина: 200px; марж: -100px 0 0; позиция: абсолютна; горна: 50%;)

По този начин, използвайки позициониране и отрицателни полета, можете да центрирате елемент на страницата.

дисплей: клетка-таблица

За вертикално подравняване свойството display: table-cell се прилага към елемента, което го принуждава да емулира клетка от таблица. Също така задаваме неговата височина и vertical-align: middle . Нека увием всичко това в контейнер със свойството dislpay: table; :

line-height .wrapper (височина: 100px; line-height: 100px;)

Вертикално подравняване дисплей: table-cell .wrapper ( display: table; width: 100%; ) .cell ( display: table-cell; height: 100px; vertical-align: middle; )

Динамично подравняване на елемент на страница

Разгледахме начини за подравняване на елементи на страница с помощта на CSS. Сега нека да разгледаме реализацията на jQuery.

Нека свържем jQuery към страницата:

Предлагам да напишете проста функция за центриране на елемент на страницата, нека я наречем alignCenter(). Самият елемент действа като аргумент на функцията:

Функция alignCenter(elem) ( // код тук )

Функция alignCenter(elem) ( elem.css(( ляво: ($(window).width() - elem.width()) / 2 + "px", горе: ($(window).height() - elem. височина()) / 2 + "px" // не забравяйте да добавите позиция: абсолютна към елемента, за да задействате координати )) )

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

Функцията е готова, остава само да я прикачите към събитията за готовност и преоразмеряване на прозореца на DOM:

$(function() ( // извикване на функцията за центриране, когато DOM е готов alignCenter($(elem)); // извикване на функцията при преоразмеряване на прозореца $(window).resize(function() ( alignCenter($(elem) )); )) // функция за центриране на елемент alignCenter(elem) ( elem.css(( // изчисляване на леви и горни координати вляво: ($(window).width() - elem.width()) / 2 + " px", отгоре: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

Приложение на Flexbox

Нови функции на CSS3, като Flexbox, постепенно стават обичайни. Технологията помага за създаване на маркиране без използване на плаващи елементи, позициониране и т.н. Може да се използва и за центриране на елементи. Например, приложете Flexbox към родителския element.wrapper и центрирайте съдържанието вътре:

Обвивка ( дисплей: -webkit-box; дисплей: -moz-box; дисплей: -ms-flexbox; дисплей: -webkit-flex; дисплей: flex; височина: 500px; ширина: 500px;) .wrapper .content ( margin: /* марж: 0 авто; само хоризонтално */ /* марж: само вертикално */ ) Lorem ipsum sit amet

Това правило центрира елемента хоризонтално и вертикално едновременно - margin вече работи не само за хоризонтално подравняване, но и за вертикално. И без известна ширина/височина.

Свързани ресурси Помогнете на проекта