Ортаны теңестіру: CSS орналасуы

Бетті жасаған кезде, сізде CSS-ді қолдану арқылы ортаға дәл келтіру керек: мысалы, негізгі модульді ортаға салу. Бұл мәселені шешудің бірнеше жолы бар, олардың әрқайсысы ерте ме, кеш пе, кез-келген макет жасаушымен қолданылуы керек.

Мәтінді ортаға дәл келтіріңіз

Сәндік мақсаттар үшін көбінесе мәтінді ортаға дәл келтіру керек, бұл жағдайда CSS сізге орналасу уақытын қысқартуға мүмкіндік береді. Бұрын бұл HTML атрибуттары арқылы жасалды, бірақ енді стандарт стандартты стильдердің көмегімен мәтінді теңестіруді талап етеді. Сыртқы шегіністерді өзгерту қажет блоктан айырмашылығы, CSS-де мәтінді ортаға бір сызық арқылы ортасында орналастырады:

• Мәтінді туралау: орталық;

Бұл сипат мұра болып табылады және ата-анадан барлық ұрпаққа беріледі. Мәтінге ғана емес, басқа элементтерге де әсер етеді. Мұны орындау үшін олар кіші әріптер (мысалы, аралық) немесе жол-блок (дисплей: block қасиеті орнатылған кез келген блоктар) болуы керек. Соңғы нұсқа элементінің енін және биіктігін өзгертуге мүмкіндік береді, шегінісін реттеуге неғұрлым икемді.

Беттердің беттерінде жиі тегтің өзі анықталады. Бұл дереу кодты жарамсыз етеді, себебі W3C теңшелім төлсипатын ескірген деп тапты. Бұл бетте оны пайдалану ұсынылмайды.

Блокты ортаға туралаңыз

Егер сіз div-ті ортаға дәл келтіруді қаласаңыз, CSS өте ыңғайлы әдісті ұсынуы мүмкін: сыртқы маржа маржасын пайдалану. Шегіністер блокты элементтерге және қатардағы блоктық элементтерге тағайындалуы мүмкін. Мүліктің мәні 0 (тігінен шегіну) және автоматты (көлденең автоматты шегіністер) мәндерін қабылдауы керек:

• Маржа: 0 авто;

Енді бұл опция мүлдем жарамды деп танылады. Сыртқы шегіністерді пайдалану, сонымен қатар, суреттің ортасында орналасуын орнатуға мүмкіндік береді: CSS-мүліктік маржасы беттегі элементті орналастырудың көптеген мәселелерін шешуге мүмкіндік береді.

Блокты солға немесе оң жаққа туралаңыз

Кейде сізде CSS әдісімен ортаға дәл келтірудің қажеті жоқ, бірақ сіз екі блоктарды бір-бірден қоямыз: біреуі сол жақтан, екіншісі оңнан. Ол үшін үш мәннің бірін қабылдайтын float қасиеті бар: сол, оң немесе ешкім. Айтыңыздаршы, сізде екі блоктар бар, олар бір-біріне жағында болуы керек. Сонда код:

• .left {float: сол;}
• Тікелей {float: right}

Алғашқы екі блоктың (мысалы, төменгі колонтитул) астында орналасуы қажет үшінші блок болса, онда нақты сипатты орнату керек:

• .left {float: сол;}
• Тікелей {float: right}
• Footer {таза: екеуі}

Мәселе мынада, бұл барлық блоктары сыныптары бар сол және оң ағыны жалпы ағыны, яғни барлық қалған элементтері бар элементтерін жоққа элементтері. Таза: екеуі де төменгі деректеме немесе басқа блоктар ағыннан түсіп кеткен элементтерді көруге мүмкіндік береді және сол жағынан да, оң жағынан да қалқып кетуді болдырмайды. Сондықтан, біздің мысалда, төменгі колонтита төмендейді.

Тігінен туралау

CSS әдістерінде ортаға дәл келтіруді орнату жеткіліксіз болған кезде, сіз әлі де бала блоктың тік күйін өзгертуіңіз керек. Кез келген жол немесе сызық-блок элементі жоғарғы немесе төменгі жиекке, негізгі элементтің ортасында болуға немесе ерікті жерде болуы мүмкін. Көбінесе, блокты ортаға тік теңестіру төлсипатын пайдаланып теңестіру керек. Мысалы, екі блок бар, екіншісі екіншісіне салынған. Бұл жағдайда ішкі блок жол-блок элементі болып табылады (дисплей: inline-block). Бала блокты тігінен туралауыңыз керек:

• Жоғарғы шекарада туралау - .child {vertical-align: top};
• Ортаны ортаға дәл келтіру - .child {vertical-align: middle};
• Төменгі шекарада туралау - .child {vertical-align: bottom};

Блоктау элементтері мәтінді туралау немесе тік-туралау функциясын да емес.

Кедергі блоктарымен мүмкін проблемалар

Кейде орталықтың CSS-ді қолдану арқылы бөлісуін кішкене проблемалар тудыруы мүмкін. Мысалы, егер сіз флотты қолдансаңыз: мысалы, үш блок бар: бірінші, екінші және үшінші. Екінші және үшінші блоктары бірінші болып жатыр. Сыныптың екінші бөлігі бар элемент сол жаққа негізделген, ал соңғы блок солға тураланған. Теңдестіруден кейін екеуі де ағыннан шығып кетті. Егер ата-аналық элемент биіктікке ие болмаса (мысалы, 30em), онда ол бала блоктары биіктігіне созылмайды. Бұл қателікті болдырмау үшін, «spacer» - көретін ерекше блок пайдаланыңыз. Екінші және үшінші. CSS-коды:

• .second {float: left}
• Үшінші. {Float: right}
• .clearfix {height: 0; Таза: екеуі де;}

Кейде қолданылатын псевдос-класс: кейін, ол сондай-ақ, бүркеншік таратумен (блоктағы мысалда, контейнер класы ішіндегі ең бірінші болып табылады және құрамында .left және .right) учаскелерге қайтаруға мүмкіндік береді.

• .left {float: сол жаққа}
• Тікелей {float: right}
• Контейнер: кейін {мазмұн: ''; Дисплей: үстел; Таза: екеуі де;}

Жоғарыда көрсетілген опциялар ең көп таралған, бірақ бірнеше вариация бар. Әрқашан эксперимент арқылы псевдо шашырауды жасаудың қарапайым және ыңғайлы әдісін табуға болады.

Орналасу дизайнерлерімен жиі кездесетін тағы бір мәселе - желілік блоктың элементтерін теңестіру. Олардың әрқайсысынан кейін бос орын автоматты түрде қосылады. Теріс шегініспен анықталған маржа сипаты бұл мәселені шешуге көмектеседі. Басқа әдістер өте аз пайдаланылады: мысалы, қаріп өлшемін қалпына келтіру . Бұл жағдайда, шрифт өлшемі: 0 басты элемент сипаттарында орнатылады. Блоктың ішіндегі мәтін болса, қажетті шрифт өлшемі жол-блок элементтерінің қасиеттеріне қайтарылады. Мысалы, қаріп өлшемі: 1эм. Әдіс әрдайым ыңғайлы емес, сондықтан сыртқы шегіністермен нұсқасы әлдеқайда жиі қолданылады.

Блоктарын теңестіру әдемі және функционалды беттерді жасауға мүмкіндік береді: бұл жалпы орналасудың орналасуы, сондай-ақ интернет-дүкендердегі тауарлардың орналасқан жері және визиткалар сайтындағы фотосуреттер.