Центрирани: ЦСС распоред

Када је распоред странице често је потребно да се направи центриран ЦСС-пут: на пример, до центра главну јединицу. Постоји неколико решења овог проблема, од којих је сваки ће пре или касније морати да користите било који кодер.

Алигн текст до центра

Често у декоративне сврхе желите да поставите текст центриран, ЦСС у овом случају, да се смањи време наметања. Раније је то урађено помоћу ХТМЛ-атрибуте, али сада је потребно стандардни да усклади текст са стилова. За разлику од блок за који желите да промените спољашњи паддинг у ЦСС поравнање текста у средини је направљен са једним линију:

• фонт-сизе: лефт;

Ова особина је наслеђена и преноси са родитеља за сву децу. То утиче не само на текст, већ и на друге елементе. За ту сврху, они треба да буду мала слова (на пример, распон) или ред-блок (било блокови који одређују екрана имовину: блок). Ова друга опција такође омогућава да промените ширину и висину елемента, флексибилнији конфигурацију отиска.

страница често алигн атрибут на себе ознаку. Ово одмах чини код неважећи, јер В3Ц је признао сизе атрибут застарела. Користећи се на страници се не препоручује.

Центеред блок

Ако желите да подесите поравнање див у средини, ЦСС може понудити доста удобан начин: употреба спољашњег паддинг маргине. Паддинг могу бити одређени као елементи блок, и линија блока. Своисва вредност треба да буде 0 (вертикални обивка), и ауто (аутоматски увучен хоризонтално):

• фонт-сизе: 0 Ауто;

Сада ова опција је препозната као апсолутно важи. Коришћење спољног оклопа такође омогућава да подесите поравнање центра: ЦСС маргина имовина нам омогућава да реши многе проблеме у вези са елементом за позиционирање на страници.

Усклађивање са леве или десне ивице блока

Понекад ЦСС начин не захтева усклађивање центру, али је неопходно да се наредна два блока, један са леве стране, а други - са десне стране. За ово постоји пловак имовина, која може да једну од три вредности: лево, десно или ништа. Рецимо да имате два блока који треба ставити раме уз раме. Затим код је следећи:

• .лефт {флоат: лефт;}
• .ригхт {флоат: лефт}

Ако постоји и трећи блок, који мора бити лоцирана у прва два блока (на пример, фоотер), онда је потребно да се региструјете јасну функцију:

• .лефт {флоат: лефт;}
• .ригхт {флоат: лефт}
• фоотер {цлеар: ботх}

Чињеница да су блокови са класама леве и десне пада од укупног тока, то јест, сви остали елементи игнорисали постојање елемената поравнати. Некретнине јасно: како вам фоотер блок или било који други виде таложи из ћелија протока и забрањује Врап (флоат) на обе леве и десне стране. Због тога, у нашем примеру, подножје је расељено надоле.

вертикално поравнање

Постоје случајеви у којима није довољно да подесите поравнање у средишту ЦСС-начине, морате да промените вертикалну позицију блока деце. Свака линија или ред-блок елемент може бити наслоњен на горњој или доњој ивици, који се налази у средини родитељског елемента или бити на произвољном месту. Најчешће захтевају поравнање центра блока, користи вертицал-алигн атрибут. Претпоставимо да постоје два блока, један угнежђених у други. У овом унутрашње јединице - ред-блоцк елемената (дисплаи: инлине-блок). Неопходно је ускладити вертикалну блок дете:

• усклађивање горње границе - .цхилд {вертицал-алигн: топ};
• центеред - .цхилд {вертицал-алигн: миддле};
• усклађивање доњој ивици - .цхилд {вертицал-алигн: боттом};

На блок елемената звук фонт-сизе или фонт-сизе не примењује.

Могући проблеми са Алигнед јединицама

Понекад ДИВ центар ЦСС-путу може да изазове мало проблема. На пример, када се користи флоат: на пример, постоје три блока: .фирст, .сецонд и .тхирд. Други и трећи спотицања лежи у првом. Елемент са класе други лево поравнат, а последњи блок - на десној страни. Након поравнавања два пао са потока. Уколико родитељ елемент није дефинисан висину (нпр 30ем), она ће престати да протежу висину супсидијарних јединица. Да бисте избегли ову грешку, користите "одстојник" - специјалне јединице, које види .сецонд и .тхирд. ЦСС код:

• .сецонд {флоат: лефт}
• .тхирд {флоат: лефт}
• .цлеарфик {хеигхт: 0; цлеар: ботх;}

псеудо често користе: после, која омогућава да се врате блокове на место стварањем псевдораспорки (у примеру у див са класе лежи унутар контејнера и садржи .фирст .лефт и .ригхт):

• .лефт {флоат: лефт}
• .ригхт {флоат: лефт}
• .цонтаинер: после {цонтент: ''; дисплеј: сто; цлеар: ботх;}

Наведене опције - најчешћи, иако постоје неке разлике. Увек можете да пронађете најлакши и најпогоднији начин за стварање псевдораспорки експериментима.

Други проблем често сусретали распоред - усклађивање линија-блок елемената. После сваког од њих простор се аутоматски додаје. Ручка помаже маргину имовину, која је дефинисана негативним отиска. Постоје и други начини, који се користе ређе, на пример, ресетовање величину фонта. У том случају, особине родитељског елемента региструје фонт-сизе: 0. Ако се налази унутар блокова текста, својства лине-блок елемената вратило до жељене фонта величине. На пример, фонт-фамили: 1ем. Метод није увек згодно, тако да се много чешће користи верзију са спољним маргинама.

Усклађивање блокова вам омогућава да креирате лепе и функционалне странице: општи изглед и распоред, као и локације робе у продавницама, и фотографије на сајту мали.