Когато често се налага оформлението на страницатацентриране в центъра на метода CSS: например центрирайте основния блок. Има няколко решения на този проблем, всеки от които, рано или късно, трябва да бъде използван от всеки типограф.
Центриране на текста в центъра
Често за декоративни цели, трябва да уточнитецентриране на текст в центъра, в този случай CSS позволява да се намали времето за оформление. Преди това това беше направено с помощта на HTML атрибути, но сега стандартът изисква подравняване на текста с помощта на стилови листа. За разлика от блоковете, за които искате да промените вдлъбнатината, в CSS центровката на центъра се извършва с един ред:
- текст-подравняване: център;
Тази собственост е наследена и предадена от родителя.на всички потомци. Той засяга не само текста, но и други елементи. За да направите това, те трябва да бъдат вградени (например, span) или inline-block (всички блокове, които имат дисплей: block property). Последната опция също ви позволява да променяте ширината и височината на елемента, по-гъвкаво да коригирате тиретата.
Често подравняването се приписва на самия таг. Това незабавно прави кода невалиден, тъй като W3C разпознава атрибута на подравняване като остарял. Използването му на страницата не се препоръчва.
Центриране на центъра
Если нужно задать выравнивание div по центру, CSS може да ви предложи доста удобен начин: използвайте марджин. Вдлъбнатините могат да бъдат зададени като блокови елементи и линейно блокиране. Стойността на имота трябва да вземе стойности 0 (вертикални отстъпи) и автоматично (автоматично хоризонтални отстъпки):
- марж: 0 автоматично;
Сега тази опция се разпознава абсолютновалиден. Използването на външни тирета също ви позволява да настроите подравняването на изображението в центъра: маркерът CSS ви позволява да разрешите много проблеми, свързани с позиционирането на елемент на страницата.
Подравнете блока наляво или надясно
Понякога центрирано по CSS начин нено е необходимо да поставите два блока един до друг: един от левия край, а другият - отдясно. За това има свойство float, което може да отнеме една от трите стойности: ляво, дясно или нищо. Представете си, че имате два блока, които трябва да се съберат заедно. Тогава кодът ще бъде така:
- .лефт {плувка: вляво;}
- .right {float: right}
Ако има и трети блок, който трябва да се намира под първите два блока (например, долен колонтитул), тогава трябва да зададете ясно свойство:
- .лефт {плувка: вляво;}
- .right {float: right}
- бележник {clear: both}
Фактът е, че блокове с класове наляво и надяснопадат от общия поток, т.е. всички останали елементи игнорират наличието на изравнени елементи. Ясното: и двете свойства позволяват на долния колонтитул или на всеки друг блок да виждат елементи, изпуснати от потока, и забранява опаковането (плаващия) както отляво, така и отдясно. Ето защо, в нашия пример, долният ред ще се понижи.
Вертикално подравняване
Има случаи, когато не е достатъчно да попитатеподравняване в центъра на методите CSS, все още трябва да промените вертикалната позиция на блока. Всеки елемент на линия или блок може да бъде натиснат до горния или долния ръб, да бъде в средата на родителския елемент или да е в произволно място. Най-често се изисква подравняване на блока в центъра, за което се използва атрибутът за вертикално подравняване. Да предположим, че има два блока, едната е вградена в другата. В същото време, вътрешният блок е елемент от блок-линия (дисплей: inline-block). Необходимо е подравняването на детския блок вертикално:
- изравняване на горната линия - .child {vertical-align: top};
- центриране по средата -. деца (вертикално изравняване: средно);
- подравняване на дъното - .child {vertical-align: bottom};
Нито текст-подравняване, нито вертикално-подравняване действат върху блокови елементи.
Възможни проблеми с подравнени блокове
Понякога подравняване на div с центъра в CSSможе да причини незначителни проблеми. Например, когато използвате float: да речем, че има три блока: .first, .cond, and third. Вторият и третият блок лежат в първия. Елемент с втори клас е вляво подравнен и последният блок е прав. След подравняването, и двамата паднаха от потока. Ако родителският елемент няма височина (например 30 см), той ще спре да се простира по височината на детските блокове. За да избегнете тази грешка, използвайте "strut" - специален блок, който вижда второ и трето. CSS код:
- . второ {float: left}
- .third {float: right}
- .clearfix {height: 0; ясно: и двете;}
Често се използва псевдо класа:след това, което също ви позволява да върнете блокове на място чрез създаване на pseudo-razorka (в примера, в div с клас контейнер, се намира вътре в .first и съдържа .left и .right):
- .лефт {плувка: ляво}
- .right {float: right}
- .container: след {съдържание: ""; дисплей: таблица; ясно: и двете;}
Горепосочените опции са най-често срещаните, въпреки че има няколко варианта. Винаги можете да намерите най-лесния и най-удобен начин за създаване на псевдоанализ чрез експерименти.
Друг често срещан проблемснематели, - подреждане на елементите с вградени блокове. След всяко от тях автоматично се добавя интервал. Пространствената собственост помага да се справим с това. Има и други методи, които се използват много по-рядко: например, нулиране на размера на шрифта. В този случай шрифт-размер: 0 се записва в свойствата на родителския елемент. Ако има текст в блоковете, желаният размер на шрифта вече се връща в свойствата на елементите с вградени блокове. Например, размер на шрифта: 1em. Методът не винаги е удобен, така че опцията с външни тирета се използва по-често.
Подреждането на блоковете ви позволява да създавате красиви и функционални страници: това е оформлението на цялостното оформление и местоположението на стоките в онлайн магазините и снимките в уеб сайта.
