Центриране на центъра: CSS оформление

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

Подравнете текста на центъра

Често за декоративни цели, трябва да настроите подравняването на текста към центъра, в този случай CSS ви позволява да намалите времето за оформление. Преди това това беше направено с помощта на HTML атрибути, но сега стандартът изисква подравняване на текста с помощта на стилови листа. За разлика от блоковете, за които искате да промените външните тирета, в CSS текстът е центриран в центъра, като се използва един ред:

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

Това имущество е наследено и предавано от родителя на всички деца. Те засягат не само текста, но и други елементи. За да направите това, те трябва да бъдат малки букви (например, span) или line-block (всички блокове, за които е настроен дисплеят: block property). Последният вариант също ви позволява да променяте ширината и височината на елемента, той е по-гъвкав, за да коригирате тиретата.

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

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

Ако искате да зададете подравняването на div в центъра, CSS може да ви предложи доста удобен начин: използвайки марж на външните полета. Отношенията могат да бъдат присвоени както на блоковите елементи, така и на блоковете по ред. Стойността на свойството трябва да бъде 0 (вертикално) и автоматично (хоризонтално отрязване):

• марж: 0 автоматично;

Сега тази опция се признава за абсолютно валидна. Използването на външни разрез също ви позволява да настроите подравняването на картината в центъра: Марж на собствеността на CSS ви позволява да решите много проблеми, свързани с позиционирането на елемент на страницата.

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

Понякога не е необходимо да се подравнявате в средата с метода CSS, но трябва да поставите два блока един до друг: един от левия, а другият от десния. За това има собственост на флота, която може да приеме една от трите стойности: ляво, дясно или никое. Да приемем, че имате два блока, които трябва да бъдат поставени една до друга. След това кодът ще бъде:

• .ляво {float: left;}
• .дясно {float: right}

Ако има и трети блок, който трябва да бъде разположен под първите два блока (например, долен колонтитул), тогава трябва да зададете ясно свойство:

• .ляво {float: left;}
• .дясно {float: right}
• бележник {clear: both}

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

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

Има случаи, когато не е достатъчно, за да зададете подравняването на центъра на CSS-начини, вие също трябва да се промени във вертикално положение на детето блок. Всяка линия или ред блок елемент може да се притиска към горния или долния ръб, разположен в средата на елемента родител или да бъде произволно място. Най-често трябва да подравните блока към центъра, като използвате атрибута vertical-align. Да предположим, че има два блока, единият е вложен в другия. Вътрешният блок е елемент от линеен блок (дисплей: inline-block). Трябва да подравните детския блок вертикално:

• подравняване на горната граница - .child {vertical-align: top};
• центриране по средата -. деца (вертикално изравняване: средно);
• подравняване на долната граница - .child {vertical-align: bottom};

Елементите на блока нито функция за подравняване на текст, нито функцията за вертикално подравняване.

Възможни проблеми с подравнени блокове

Понякога подравняването на div около центъра с CSS метод може да доведе до малки проблеми. Например, когато използвате float: например, има три блока: .first, .cond, and third. Вторият и третият блок лежат в първия. Елемент с втори клас е оправдан отляво и последният блок е подравнен вдясно. След изравняването, двамата излязоха от потока. Ако родителят не е с височина (например 30 см), то вече няма да се простира по височината на детските блокове. За да избегнете тази грешка, използвайте "spacer" - специален блок, който вижда второ и трето. CSS-код:

• .второ {float: left}
• .трета {float: right}
• .clearfix {height: 0- clear: both-}

псевдо-често се използва: след, което позволява да се върне на блоковете на място чрез създаване psevdorasporki (в примера в DIV с клас се намира вътре в контейнера и съдържа .first .left и .right):

• .ляво {float: left}
• .дясно {float: right}
• .контейнер: след {съдържание: `` - дисплей: таблица ясно: и двете-}

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

Друг проблем, който често се среща от дизайнерите на оформлението, е подравняването на елементите на линейните полета. След всяко от тях автоматично се добавя интервал. Матрицата собственост, която е посочена от отрицателна вдлъбнатина, помага да се справи с това. Има и други методи, които се използват много по-рядко: например нулиране размер на шрифта. В този случай размерът на шрифта: 0 е зададен в свойствата на родителския елемент. Ако във вътрешността на блоковете има текст, след това се връща необходимия размер на шрифта в свойствата на елементите на блокови линии. Например, размер на шрифта: 1em. Методът не винаги е удобен, така че вариантът с външни вдлъбнатини е много по-често използван.

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