Көбінесе тапсырма беттің/экранның ортасына блокты туралау болып табылады, тіпті Java сценарийінсіз, қатаң өлшемдерді немесе теріс шегіністерді орнатусыз және блок оның өлшемінен асып кетсе, айналдыру жолақтары ата-ана үшін жұмыс істейтіндей етіп туралау болып табылады. . Интернетте блокты экранның ортасына туралау туралы көптеген монотонды мысалдар бар. Әдетте, олардың көпшілігі бірдей принциптерге негізделген.
Төменде мәселені шешудің негізгі жолдары, олардың оң және теріс жақтары берілген. Мысалдардың мәнін түсіну үшін мен берілген сілтемелердегі мысалдардағы Нәтиже терезесінің биіктігін/енін азайтуды ұсынамын.
1-нұсқа: Теріс шегініс.
Позициялау блокжоғарғы және сол жақ атрибуттарды 50% пайдаланып, блоктың биіктігі мен енін алдын ала біле отырып, өлшемнің жартысына тең теріс маржаны орнатыңыз. блок. Бұл опцияның үлкен кемшілігі - теріс шегіністерді санау керек. Сондай-ақ блокайналдыру жолақтарымен қоршалған кезде мүлдем дұрыс әрекет етпейді - ол жай ғана кесілген, өйткені оның теріс шеттері бар.
Ата-ана ( ені: 100%; биіктік: 100%; орны: абсолютті; жоғарғы: 0; сол жақ: 0; толып: авто; ) .block ( ені: 250px; биіктік: 250px; орны: абсолютті; жоғарғы: 50%; сол жақ : 50% маржа: -125px 0 0 -125px img (макс. ені: 100%; биіктік: авто; дисплей: блок; маржа: 0 авто; жиек: жоқ; ) )
2-параметр. Автоматты шегініс.
Аз таралған, бірақ біріншіге ұқсас. үшін блокбіз ені мен биіктігін орнатамыз, атрибуттарды жоғарғы оң жақ төменгі сол жақта 0-ге орналастырамыз және маржаны автоматты түрде орнатамыз. Бұл опцияның артықшылығы - жұмыс айналдыру жолақтары ата-ана, егер соңғысының ені мен биіктігі 100% болса. Бұл әдістің кемшілігі өлшемдердің қатаң орнатылуы болып табылады.
Ата-ана ( ені: 100%; биіктік: 100%; орны: абсолютті; жоғарғы: 0; сол жақ: 0; толып: авто; ) .block ( ені: 250px; биіктік: 250px; орын: абсолютті; жоғарғы: 0; оң: 0; төменгі: 0; img (макс-ені: 100%; биіктік: авто; жиек: жоқ; )
3-нұсқа. Кесте.
сұрайық ата-анакесте стильдері, ұяшық ата-анаМәтінді туралауды ортаға орнатыңыз. А блоксызықтық блок үлгісін орнатамыз. Біз алатын кемшіліктер жұмыс істемейтін айналдыру жолақтары болып табылады және тұтастай алғанда кестенің «эмуляциясының» эстетикасы жоқ.
Ата-ана ( ені: 100%; биіктік: 100%; дисплей: кесте; орны: абсолютті; жоғарғы: 0; сол жақта: 0; > .inner ( дисплей: кесте-ұяшық; мәтінді туралау: орталық; тік туралау: орта; ) ) .block (дисплей: кірістірілген блок; img (дисплей: блок; шекара: жоқ; ) )
Бұл мысалға айналдыруды қосу үшін дизайнға тағы бір элемент қосу керек.
Мысал: jsfiddle.net/serdidg/fk5nqh52/3.
4-нұсқа. Псевдоэлемент.
Бұл опция алдыңғы әдістерде аталған барлық мәселелерден айырылады, сонымен қатар бастапқы мәселелерді шешеді. Мәселе мынада ата-анастильдерді орнату псевдо элементбұрын, атап айтқанда 100% биіктік, орталыққа туралау және кірістірілген блок үлгісі. Онымен бірдей блоксызықтық блок үлгісі орналастырылған, ортаға қойылған. Кімге блокастына «құлап» қалмады псевдо элемент, біріншісінің өлшемдері одан үлкен болғанда ата-ана, көрсетіңіз ата-ана white-space: nowrap және font-size: 0, содан кейін блокмына мәнерлермен бас тартыңыз - бос орын: қалыпты. Бұл мысалда, font-size: 0 арасындағы нәтиже бос орынды жою үшін қажет ата-анаЖәне блоккодты пішімдеуге байланысты. Кеңістікті басқа жолдармен жоюға болады, бірақ оны жай ғана болдырмау жақсы деп саналады.
Ата-ана (ені: 100%; биіктік: 100%; орны: абсолютті; жоғарғы: 0; сол жақ: 0; толып кету: авто; бос орын: nowrap; мәтінді туралау: орталық; шрифт өлшемі: 0; &:бұрын ( биіктік: 100% дисплей: вертикальді теңестіру: ортасы: «» img (дисплей: блок; шекарасы; ) ;
Немесе ата-ана бүкіл бетті емес, терезенің биіктігі мен енін ғана алуы қажет болса:
Ата-ана (позиция: бекітілген; жоғарғы: 0; оң жақ: 0; төменгі: 0; сол: 0; толып кету: авто; бос орын: nowrap; мәтінді туралау: орталық; шрифт өлшемі: 0; &:бұрын ( биіктігі: 100% дисплей: inline-block: ортасы: "" (дисплей: блок; шекара: жоқ; ) )
Опция 5. Flexbox.
Ең қарапайым және ең талғампаз әдістердің бірі - flexbox пайдалану. Ол дененің қажетсіз қозғалысын қажет етпейді, болып жатқан оқиғаның мәнін анық сипаттайды және өте икемді. Бұл әдісті таңдаған кезде есте сақтау керек жалғыз нәрсе - IE 10 нұсқасын қоса алғанда қолдау. caniuse.com/#feat=flexbox
Ата-ана (ені: 100%; биіктік: 100%; орны: бекітілген; жоғарғы: 0; сол жақ: 0; дисплей: иілу; туралау: элементтер: ортаға; туралау-мазмұн: орталық; негіздеу-мазмұн: орталық; толып кету: авто; ) .block (фон: #60a839; img (дисплей: блок; жиек: жоқ; ) )
6-нұсқа. Трансформация.
Егер біз құрылыммен шектелсек және негізгі элементті басқаруға ешқандай мүмкіндік болмаса, қолайлы, бірақ блокты қандай да бір жолмен туралау қажет. Translate() css функциясы көмекке келеді. 50% абсолютті орналасу мәні блоктың жоғарғы сол жақ бұрышын дәл ортасына орналастырады, содан кейін теріс аудару мәні блокты өз өлшемдеріне қатысты жылжытады. Теріс әсерлер бұлдыр жиектер немесе қаріп стилі түрінде пайда болуы мүмкін екенін ескеріңіз. Сондай-ақ, бұл әдіс java-скрипті арқылы блоктың орнын есептеу кезінде қиындықтарға әкелуі мүмкін, кейде CSS қалдырылған қасиетін пайдалану салдарынан еннің 50% жоғалуын өтеу үшін блок үшін көрсетілген ереже болуы мүмкін. анықтама: маржа-оң жақ: -50% .
Ата-ана ( ені: 100%; биіктік: 100%; орны: бекітілген; жоғарғы: 0; сол жақ: 0; толып кету: автоматты; ) .block ( орны: абсолютті; жоғарғы: 50%; сол жақ: 50%; түрлендіру: аудару( -50%, -50%) img (дисплей: блок; ) )
7-параметр. Түйме.
Пайдаланушы azproduction опциясы қайда блоктүйме тегімен жиектеледі. Түйме оның ішіндегі барлық нәрсені, атап айтқанда кірістірілген және блоктық (inline-block) моделінің элементтерін орталықтандыру қасиетіне ие. Іс жүзінде мен оны пайдалануды ұсынбаймын.
Ата-ана ( ені: 100%; биіктік: 100%; орны: абсолютті; жоғарғы: 0; сол жақ: 0; толып: авто; фон: жоқ; жиек: жоқ; контур: жоқ; ) .block ( дисплей: inline-block; img (дисплей: блок;; шекара: жоқ; ) )
Бонус
4-ші опцияның идеясын пайдалана отырып, сіз үшін сыртқы жиектерді орнатуға болады блок, ал соңғысы айналдыру жолақтарымен қоршалған түрде тиісті түрде көрсетіледі.Мысал: jsfiddle.net/serdidg/nfqg9rza/2.
Сондай-ақ кескінді ортасына туралауға болады, ал егер кескін үлкенірек болса ата-ана, өлшеміне қарай масштабтаңыз ата-ана.
Мысал: jsfiddle.net/serdidg/nfqg9rza/3.
Үлкен суреті бар мысал:
CSS-те мәтінді тігінен туралаңыз- өте қиын жұмыс. Мен көптеген адамдармен күресіп жатқанын көрдім, мен нақты жауап беретін дизайнға келгенде «сыни» қателерді табамын.
Бірақ қорықпаңыз: егер сіз CSS тік туралаумен қазірдің өзінде күресіп жатсаңыз, сіз дұрыс жерге келдіңіз.
CSS тік туралау қасиеті туралы сөйлесейік
Мен веб-әзірлеуде алғаш жұмыс істей бастағанда, мен бұл сипатпен аздап күрестім. Мен бұл классикалық қасиет сияқты жұмыс істеуі керек деп ойладым » мәтінді туралау" Әй, бәрі қарапайым болса ғой...
тік туралау CSS сипатыкестелермен тамаша жұмыс істейді, бірақ divs немесе басқа элементтермен емес. Оны div-де пайдаланған кезде, ол элементті мазмұнына емес, басқа div-лерге қатысты туралайды. Бұл жағдайда сипат тек дисплеймен жұмыс істейді: inline-block; .
Мысалды қараңыз
Біз div емес, мазмұнды ортаға салғымыз келеді!
Сізде екі нұсқа бар. Егер сізде тек мәтіні бар div элементтері болса, онда line-height сипатын пайдалануға болады. Бұл элементтің биіктігін білу керек дегенді білдіреді, бірақ оны орнату мүмкін емес. Осылайша сіздің мәтініңіз әрқашан орталықта болады.
Бұл тәсіл туралы шындық CSS тік туралаукемшілігі бар. Егер мәтін көп жолды болса, онда жол биіктігі жолдар санына көбейтіледі. Сірә, бұл жағдайда сіз қорқынышты түрде жасалған бетке ие боласыз.
Мына мысалға назар аударыңыз
Ортасына келтіргіңіз келетін мазмұн бірнеше жолдан тұрса, кестенің divs нұсқасын қолданған дұрыс. Кестелерді де пайдалануға болады, бірақ бұл семантикалық тұрғыдан дұрыс емес. Егер сізге жауап беру үшін үзілістер қажет болса, div элементтерін қолданған дұрыс.
Бұл жұмыс істеуі үшін дисплейі бар ата-аналық контейнер болуы керек: кесте және оның ішінде displey: кесте ұяшығы және тік туралау: орта арқылы ортасына орналастырғыңыз келетін бағандардың қажетті саны.
Мысалды қараңыз
Неліктен бұл div элементтерімен емес, кестені белгілеумен жұмыс істейді? Өйткені кестедегі жолдардың биіктігі бірдей. Кесте ұяшығының мазмұны барлық қолжетімді биіктік кеңістігін пайдаланбаған кезде, шолғыш мазмұнды ортаға салу үшін автоматты түрде тік толтыруды қосады.
позиция қасиеті
CSS div тік туралау негіздерінен бастайық:
- позиция: статикалық - әдепкі. Элемент HTML тәртібіне сәйкес көрсетіледі;
- позиция: абсолютті - элементтің нақты орнын анықтау үшін қолданылады. Бұл позиция әрқашан салыстырмалы түрде ең жақын орналасқан негізгі элементпен байланысты (жоқ статикалық). Элементтің нақты орнын анықтамасаңыз, оны басқаруды жоғалтасыз. Ол құжат ағынын толығымен елемей, кездейсоқ пайда болады. Әдепкі бойынша элемент жоғарғы сол жақ бұрышта пайда болады;
- позиция: салыстырмалы - элементті оның қалыпты орнына (статикалық) қатысты орналастыру үшін қолданылады. Бұл мән құжат айналымы тәртібін сақтайды;
- позиция: бекітілген - элементті шолу терезесінде әрқашан көрінетін етіп шолғыш терезесіне қатысты орналастыру үшін пайдаланылады.
Ескерту: кейбір қасиеттер ( жоғарғы және z-индекс) элемент позицияға орнатылғанда ғана жұмыс істейді (жоқ статикалық).
Іске кірісейік!
іске асырғыңыз келе ме CSS тік ортасына туралау? Алдымен салыстырмалы орны мен өлшемдері бар элемент жасаңыз. Мысалы: ені мен биіктігі бойынша 100%.
Екінші қадам мақсатты браузерлерге байланысты өзгеруі мүмкін, бірақ сіз екі опцияның бірін пайдалана аласыз:
- Ескі қасиет: ені мен биіктігінің жартысын алып тастау үшін терезенің нақты өлшемін білу қажет. Мысалды қараңыз;
- Жаңа CSS3 сипаты: 50% аудару мәні бар түрлендіру сипатын қосуға болады және блок әрқашан орталықта болады. Мысалды көру.
Негізінде, мазмұнды ортаға салғыңыз келсе, жоғарғы жағын ешқашан қолданбаңыз: 40%немесе сол жақ: 300px . Бұл сынақ экрандарында жақсы жұмыс істейді, бірақ ол ортаға қойылмаған.
Позицияны есте сақтаңыз: бекітілген бе? Онымен абсолютті позициямен бірдей әрекетті орындауға болады, бірақ негізгі элемент үшін салыстырмалы позиция қажет емес - ол әрқашан браузер терезесіне қатысты орналасады.
Сіз flexbox сипаттамасы туралы естідіңіз бе?
Сіз flexbox пайдалана аласыз. Бұл кез келген басқа нұсқаға қарағанда әлдеқайда жақсы мәтінді CSS ортасына тігінен туралау. Flexbox көмегімен элементтерді басқару баланың ойыны сияқты. Мәселе мынада, кейбір браузерлерді, мысалы, IE9 және төмендегі нұсқаларды алып тастау керек. Мұнда блокты тігінен ортаға салудың мысалы берілген:
Мысалды көру
Flexbox орналасуын пайдаланып, бірнеше блоктарды ортаға қоюға болады.
Осы мысалдардан білгендеріңізді қолдансаңыз, меңгере аласыз CSS тік блокты туралаумүмкіндігінше тезірек.
Сілтемелер және одан әрі оқу
CSS белгілеуді үйрену
FlexBox Froggy
Flexbox құмсалғышы
Мақаланың аудармасы « Барлығына арналған CSS тік туралау (манекелер кіреді)” жобасын тату жоба командасы дайындады.
Қайырлы күн, осы басылымның жазылушылары мен оқырмандары. Бүгін мен егжей-тегжейлі айтып, CSS-те мәтінді қалай ортаға салу керектігін айтқым келеді. Алдыңғы кейбір мақалаларда мен бұл тақырыпты жанама түрде қозғадым, сондықтан сізде бұл салада белгілі бір білім бар.
Дегенмен, осы басылымда мен сізге нысандарды туралаудың барлық әртүрлі тәсілдері туралы айтып беремін, сонымен қатар абзацтарды шегініс пен қызыл сызықпен қалай сызу керектігін түсіндіремін. Ендеше материалды меңгеруді бастайық!
HTML және оның ұрпақтары және туралаңыз
Бұл әдіс ешқашан қолданылмайды, өйткені ол стиль кестесінің каскадты құралдарымен ауыстырылды. Дегенмен, мұндай тегтің бар екенін білу сізге зиян тигізбейді.
Валидацияға келетін болсақ (бұл термин «» мақаласында егжей-тегжейлі сипатталған), html спецификациясының өзі пайдалануды айыптайды. < орталық>, өйткені жарамдылық үшін өтуді пайдалану қажет DOCTYPE>.
Бұл түрітыйым салынған элементтердің өтуіне мүмкіндік береді.
Енді атрибутқа көшейік туралау. Ол нысандардың көлденең туралануын орнатады және тег туралы мәлімдемеден кейін сәйкес келеді. Әдетте, оны мазмұнды солға туралау үшін пайдалануға болады ( қалды), оң жақ жиегі бойынша ( дұрыс), ортаңғы ( орталық) және мәтін ені бойынша ( ақтау).
Төменде сурет пен абзацты ортаға қоятын мысал келтіремін.
Бұл мазмұн орталықта болады.
Кескін үшін біз талдап жатқан атрибут сәл басқаша мағынаға ие екенін ескеріңіз.
Мен қолданған мысалда туралау =орта». Осының арқасында сөйлем суреттің ортасында анық орналасуы үшін кескін тураланды.
Css-де орталықтандыру құралдары
Блоктарды, мәтінді және графикалық мазмұнды туралауға арналған CSS сипаттары әлдеқайда жиі қолданылады. Бұл, ең алдымен, стильдерді енгізудің ыңғайлылығы мен икемділігіне байланысты.
Сонымен, мәтінді орталықтандырудың бірінші қасиетінен бастайық - бұл мәтін-туралау.
Ол туралау сияқты жұмыс істейді. Кілт сөздердің ішінен жалпы тізімнен біреуін таңдауға немесе ата-баба белгілерін мұраға алуға болады ( мұрагер).
Мен css3-те тағы 2 параметрді орнатуға болатынын атап өткім келеді: бастау– мәтінді жазу ережелеріне байланысты (оңнан солға немесе керісінше), солға немесе оңға (жұмыстың солға немесе оңға ұқсас) теңестіруді орнатады және Соңы– бастауға қарама-қарсы (мәтінді солдан оңға қарай жазғанда оң жақ, оңнан солға жазғанда – солға қарай әрекет етеді).
Оң жақтағы сөйлем
Аяғын қолданатын сөйлем
Мен сізге кішкентай трюк туралы айтайын. Мәнді таңдағанда ақтаусоңғы жол төменгі жағынан тартымсыз салбырап тұруы мүмкін. Мысалы, оны орталықта орналастыру үшін сіз сипатты пайдалана аласыз мәтінді туралау-соңғы.
Торап мазмұнын немесе кесте ұяшықтарын тігінен туралау үшін сипатты пайдаланыңыз тік туралау. Төменде мен элементтің негізгі кілт сөздерін сипаттадым.
| Негізгі сөз | Мақсат |
| базалық | Негізгі сызық деп аталатын ата-баба сызығына туралауды көрсетеді. Егер ата-баба нысанында мұндай сызық болмаса, онда туралау төменгі шекара бойымен жүреді. |
| орта | Мутацияланған нысанның ортасы негізгі элементтің биіктік қабаты қосылған негізгі сызыққа тураланады. |
| төменгі | Таңдалған мазмұнның төменгі жағы оның астындағы нысанның төменгі жағына реттеледі. |
| жоғарғы | Төменгіге ұқсас, бірақ нысанның жоғарғы бөлігімен. |
| супер | Таңбаның жоғарғы белгісін жасайды. |
| суб | Элементтің ішкі таңбасын жасайды. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
C INЕ ТТУРАЛЫTO
|
Шегіністер
Соңында абзац шегіністеріне келеміз. CSS тілі арнайы сипатты пайдаланады мәтін шегінісі.
Оның көмегімен сіз қызыл сызықты да, шығыңқы да жасай аласыз (теріс мәнді көрсету керек).
Қызыл сызық жасау үшін тек бір параметрді білу қажет.
Бұл қарапайым мәтін шегініс қасиеті.
Әрбір мысалды іс жүзінде қолданып көргендерді мақтаймын. Менің блогыма сілтемелерді достарыңызға жіберіңіз және жазылуды ұмытпаңыз. Іске сәт! Сау бол!
Құрметпен, Роман Чуешов
Оқыңыз: 675 рет
Веб-дизайнерлер күн сайын өз жұмыстарында DIV пайдаланады. Ешқандай сөзсіз, бұл ең танымал тег. Кез келген веб-сайттың көзін ашыңыз, сонда сіз нысандардың үштен екісі болмаса да, көпшілігі қоршалғанын көресіз.
DIV дегеніміз не
Элементтің атауы ағылшынның division сөзінен шыққан, ол бөлу дегенді білдіреді. Белгілеуді жазу кезінде элементтерді блоктарға бөлу үшін қолданылады. DIVs веб-беттегі мазмұн топтарын қоршайды. Мысалы, суреттер, мәтіні бар абзацтар. Тег мазмұнды көрсетуге ешқандай әсер етпейді және семантикалық жүктемені көтермейді.
DIV барлық жаһандық атрибуттарды қолдайды. Бірақ веб-дизайн үшін сізге тек екі қажет - сынып және идентификатор. Сіз басқалар туралы тек экзотикалық жағдайларда ғана есте сақтайсыз, бұл факт емес. Бұрын divs ортасына немесе солға туралау үшін пайдаланылған align төлсипаты ескірген.
DIVs қашан пайдалану керек
Сайт тоңазытқыш екенін елестетіп көріңіз, ал DIV - бұл мазмұнды сұрыптауыңыз керек пластик контейнерлер. Жемістерді бауырымен бір ыдысқа салмас едіңіз. Өнімнің әр түрін бөлек орналастырасыз. Веб-контент ұқсас жолмен жасалады.
Кез келген веб-сайтты ашып, оны мағыналы блоктарға бөліңіз. Жоғарғы деректеме, төменгі колонтитул, ортасында негізгі мәтін. Бүйірде әдетте жарнамалық мазмұн немесе тегтер бұлты бар кішірек баған болады.
Енді әрбір бөлімді толығырақ қарастырыңыз. Тақырыптан бастаңыз. Сайттың тақырыпшасында жеке логотип, навигация, бірінші деңгей тақырыбы, кейде ұран болады. Әрбір семантикалық блокқа өз контейнерін тағайындаңыз. Бұл ағындағы элементтерді бөліп қана қоймай, оларды пішімдеуді жеңілдетеді. DIV тегіндегі нысанды класс немесе идентификатор беру арқылы ортаға қою оңайырақ болады.
Шеттерді пайдалану арқылы DIVs орталау
Веб-элементтерді көрсету кезінде браузер үш сипатты қарастырады: толтыру, жиектеу және жиек. Толтырғыш - бұл мазмұн мен оның шекарасы арасындағы кеңістік. Маржа – бір объектіні екіншісінен бөлетін өрістер. Шекара - блоктар бойындағы сызықтар. Оларды барлығына бірден немесе тек бір жаққа тағайындауға болады:
div(жиек: 1px тұтас №333; сол жақтағы жиек: жоқ; )Бұл сипаттар нысандар арасына бос орын қосады және оларды туралауға және дұрыс орналастыруға көмектеседі. Мысалы, кескіні бар блокты сол жақ жиектен ортасына 20% жылжыту қажет болса, 20% мәні бар элементке сол жақ жиегін тағайындайсыз:
img-мен блоктау(сол жақтағы жиек: 20%; )
Элементтерді ені мәндері мен теріс толтыру арқылы пішімдеуге болады. Мысалы, өлшемдері 200px 200px болатын блок бар. Алдымен оған абсолютті позицияны тағайындап, оны ортасына 50% жылжытайық.
Div(позиция: абсолютті; сол жақта: 50%; )
Енді орталықтандырылған DIV дұрыс орналасқанына көз жеткізу үшін оның енінің 50% тең солға теріс жиегін береміз, яғни -100 пиксель:
Сол жақ жиегі: -100px;
CSS-те бұл «ауаны шығару» деп аталады. Бірақ оның тұрақты есептеулер жүргізу қажеттілігінде айтарлықтай кемшілігі бар, бұл ұя салудың бірнеше деңгейі бар элементтер үшін өте қиын. Егер толтыру және жиек ені мәндері көрсетілсе, браузер әдепкі бойынша контейнердің өлшемдерін жиектер қалыңдығының, оң және сол жақтағы толтырғыштың және ішіндегі мазмұнның қосындысы ретінде есептейді. да таң қалдырады.
Сондықтан DIV ортасына қою қажет болғанда, border-box мәні бар box-sizing сипатын пайдаланыңыз. Бұл браузерге DIV элементінің жалпы еніне толтыру және жиек мәндерін қосуға жол бермейді. Элементті көтеру немесе төмендету үшін теріс мәндерді де пайдаланыңыз. Бірақ бұл жағдайда олар контейнердің жоғарғы немесе төменгі өрісіне тағайындалуы мүмкін.
Автоматты шеттерді пайдаланып DIV блогын қалай ортаға салу керек
Бұл үлкен блоктарды ортаға салудың оңай жолы. Сіз жай ғана контейнердің енін және маржа сипатын автоматты түрде тағайындайсыз. Браузер барлық жұмысты өзі орындай отырып, сол және оң жақтағы шеттері бірдей блокты ортаға орналастырады. Нәтижесінде сіз математикалық есептеулерде шатасу қаупін тудырмайсыз және уақытыңызды айтарлықтай үнемдейсіз.
Жауап беретін қолданбаларды әзірлеу кезінде автоматты өріс әдісін пайдаланыңыз. Ең бастысы - контейнерге еннің мәнін em немесе пайызбен тағайындау. Жоғарыдағы мысалдағы код DIV ортасына орналастырады және кез келген құрылғыда, соның ішінде ұялы телефондарда ол экранның 90% алады.
Дисплей сипаты арқылы туралау: кірістірілген блок
Әдепкі бойынша, DIV элементтері блок элементтері болып саналады және олардың көрсету мәні блок болып табылады. Бұл әдіс үшін осы сипатты қайта анықтау қажет. Тек негізгі контейнері бар DIV үшін жарамды:
outer-div класы бар элементке мәтінді ортасына келтіретін орталық мәні бар мәтінді туралау сипаты тағайындалады. Бірақ қазір браузер кірістірілген DIV-ті блок нысаны ретінде көреді. Мәтінді туралау сипаты жұмыс істеуі үшін inner-div кіші әріп ретінде қарастырылуы керек. Осылайша, ішкі div селекторы үшін CSS кестесінде келесі кодты жазасыз:
Inner-div(дисплей: inline-block; )
Көрсету сипатын блоктан кірістірілген блокқа өзгертесіз.
түрлендіру/аудару әдісі
Каскадты стиль кестелері веб-элементтерді өз қалауыңыз бойынша жылжытуға, қисайтуға, бұруға және басқаша түрлендіруге мүмкіндік береді. Ол үшін трансформация қасиеті пайдаланылады. Мәндер қажетті түрлендіру түрі мен дәрежесін көрсетеді. Бұл мысалда біз аудармамен жұмыс істейміз:
түрлендіру: аудару(50%, 50%);Аудару функциясы элементті ағымдағы орнынан солға/оңға және жоғары/төмен жылжытады. Екі мән жақшаға беріледі:
- көлденең қозғалыс дәрежесі;
- тік қозғалыс дәрежесі.
Егер элементті координаталық осьтердің біреуі бойынша ғана жылжыту қажет болса, translate сөзінен кейін сіз осьтің атын және жақшаның ішінде қажетті орын ауыстырудың мөлшерін көрсетіңіз:
Трансформация: translateY(-20%);
Кейбір нұсқаулықтарда жеткізуші префикстері бар түрлендіруді таба аласыз:
Webkit-transform: аудару(50%, 50%); -ms-transform: аудару(50%, 50%); түрлендіру: аудару(50%, 50%);
2018 жылы бұл сипатқа барлық браузерлер, соның ішінде Edge және IE қолдау көрсетеді.
Біз қалаған DIV ортасына қою үшін CSS аудару функциясы тік және көлденең ось үшін 50% мәнімен жазылған. Бұл браузер элементті ағымдағы орнынан ені мен биіктігінің жартысына ығыстыруына әкеледі. Ені мен биіктігі сипаттары көрсетілуі керек:
Түрлендіру сипаты қолданылатын элемент оны қоршаған нысандардан тәуелсіз қозғалатынын есте сақтаңыз. Бір жағынан, бұл ыңғайлы, бірақ кейде жылжыту арқылы DIV басқа контейнерді қабаттасуы мүмкін. Сондықтан веб-компоненттерді орталықтандырудың бұл әдісі стандартты емес болып саналады және аса қажеттілік жағдайында ғана қолданылады. Анимация үшін барлық CSS канондарына сәйкес түрлендірулер қолданылады.
Flexbox орналасуымен жұмыс істеу
Flexbox веб макеттерін жобалаудың күрделі әдісі болып саналады. Бірақ егер сіз оны меңгерсеңіз, оның стандартты пішімдеу әдістеріне қарағанда әлдеқайда қарапайым және жағымды екенін түсінесіз. Flexbox спецификациясы элементтерді өңдеудің икемді және керемет қуатты тәсілі болып табылады. Модуль атауы ағылшын тілінен «икемді контейнер» деп аударылған. Элементтердің енінің, биіктігінің және орналасуының мәндері шегіністер мен жиектерді есептеместен автоматты түрде реттеледі.
Алдыңғы мысалдарда біз дисплей сипатымен жұмыс істедік, бірақ біз оны блоктау және кірістірілген блок мәндеріне орнаттық. Икемді орналасуларды жасау үшін біз display: flex пайдаланамыз. Алдымен бізге икемді контейнер қажет:
Оны каскадты кестелердегі икемді контейнерге түрлендіру үшін біз жазамыз:
Flex-контейнер (дисплей: flex; )
Барлық кірістірілген нысандар, бірақ тек тікелей ұрпақтар икемді элементтер болады:
Тізімді икемді контейнер ішіне орналастырсаңыз, онда li тізім элементтері икемді элементтер болып саналмайды. Flexbox орналасуы тек ul мекенжайында жұмыс істейді:
Иілгіш элементтерді орналастыру ережелері
Икемді элементтерді басқару үшін сізге justify-content және align-элементтері қажет. Сіз көрсеткен мәндерге байланысты бұл екі сипат қажетінше нысандарды автоматты түрде орналастырады. Барлық кірістірілген DIV-лерді ортаға қою қажет болса, біз justify-content: center, align-items: center және басқа ештеңе жазамыз. Браузер жұмыстың қалған бөлігін өзі жасайды:
Мәтінді икемді элементтер болып табылатын DIV файлдарының ортасына қою үшін стандартты мәтінді туралау техникасын пайдалануға болады. Немесе әрбір кірістірілген DIV-ді икемді контейнерге айналдырып, мазмұнды justify-content арқылы басқаруға болады. Бұл әдіс әр түрлі мазмұнды, соның ішінде графиканы, басқа кірістірілген нысандарды, соның ішінде көп деңгейлі тізімдерді қамтитын болса, әлдеқайда ұтымдырақ.
Автордан:Сіздерді біздің блогтың беттеріне тағы да қош келдіңіздер. Бүгінгі мақалада мен блоктарға да, олардың мазмұнына да қолдануға болатын әртүрлі туралау әдістері туралы айтқым келеді. Атап айтқанда, CSS-де блоктарды туралау, сондай-ақ мәтінді туралау.
Блоктарды ортаға туралау
CSS-де блокты ортаға қою оңай. Бұл көптеген адамдарға ең танымал әдіс, бірақ мен бұл туралы дәл қазір айтқым келеді, ең алдымен. Бұл негізгі элементке қатысты көлденең орталықтандырылған туралауды білдіреді. Бұл қалай жасалады? Айталық, бізде контейнер бар және біздің эксперименттік тақырыбымыз оның ішінде:
< div id = "wrapper" > < div id = "header" > < / div > < / div > |
Бұл сайттың тақырыбы деп есептейік. Ол терезенің бүкіл еніне созылмайды және біз оны ортаға қоюымыз керек. Біз былай жазамыз:
#тақырып( ені / максимум - ені: 800px; маржа: 0 авто; |
Біз дәл немесе максималды енін көрсетуіміз керек, содан кейін негізгі қасиетін жазуымыз керек - margin: 0 auto. Ол тақырыптың сыртқы жиектерін орнатады, бірінші мән жоғарғы және төменгі жиектерді анықтайды, ал екіншісі оң және сол жақ шеттерін анықтайды. Автоматты мән браузерге элемент өзінің ата-анасының дәл ортасында болуы үшін екі жағындағы толтыруды автоматты түрде есептеуді айтады. Ыңғайлы!
Мәтінді туралау
Бұл да өте қарапайым техника. Барлық кірістірілген элементтерді туралау үшін мәтінді туралау қасиетін және оның мәндерін пайдалануға болады: солға, оңға, ортаға. Соңғысы мәтінді ортаға салады, бұл бізге қажет. Сіз тіпті суретті дәл осылай туралай аласыз, себебі ол әдепкі бойынша кірістірілген элемент болып табылады.
Мәтінді тігінен туралаңыз
Бірақ бұл күрделірек. Әдепкі бойынша, блоктық контейнерде мәтінді тігінен оңай ортаға салатын қарапайым, белгілі сипат жоқ. Дегенмен, макет дизайнерлері жылдар бойы ойлап тапқан бірнеше әдістер бар.
Толтырғышты пайдаланып блок биіктігін орнатыңыз. Бұл әдіс биіктік арқылы айқын биіктікті орнату емес, оны жоғарғы және төменгі жағындағы толтырғыштарды қолданып жасанды түрде жасау болып табылады, ол бірдей болуы керек. Кез келген блокты құрайық және оған келесі қасиеттерді жазайық:
div(фон: #ccc; толтыру: 30px 0; )
div( фон: #ccc; толтыру: 30px 0; |
Фон тек жиектерді, сондай-ақ толтырғышты көрнекі түрде көрсетуге арналған. Енді блоктың биіктігі осы екі шегініс пен сызықтың өзінен тұрады және бәрі келесідей көрінеді:
Блок үшін сызық биіктігін анықтаңыз. Мәтіннің бір жолын туралау қажет болса, бұл дұрысырақ әдіс деп ойлаймын. Оның көмегімен биіктікті биіктік қасиетін пайдаланып, нормаға сәйкес жазуға болады. Осыдан кейін ол тұтастай блоктың биіктігімен бірдей сызық биіктігін орнатуы керек.
div(биіктігі: 60px; сызық биіктігі: 60px; )
div( биіктігі: 60px; сызық биіктігі: 60px; |
Нәтиже жоғарыдағы суретке ұқсас болады. Толтырғышты қоссаңыз да, бәрі жұмыс істейді. Дегенмен, тек бір жол үшін. Элементте қосымша мәтін қажет болса, бұл әдіс жұмыс істемейді.
Блокты кесте ұяшығына түрлендіру. Бұл әдістің мәні кесте ұяшығында элементті тігінен ортаға орналастыратын vertical-align: middle қасиеті бар. Тиісінше, бұл жағдайда блок келесіге орнатылуы керек:
div(дисплей: кесте ұяшығы; тік туралау: орта; )
div( көрсету: кесте – ұяшық; тік - туралау: орта; |
Бұл әдіс жақсы, себебі мәтінді орталыққа қалағаныңызша туралауға болады. Бірақ дисплей: кестені біздің div орналасқан блокқа жазған дұрыс, әйтпесе ол жұмыс істемеуі мүмкін.
Міне, біз бүгінгі күннің соңғы техникасына келдік - бұл блоктардың тік туралануы. Тағы да айта кету керек, бұл үшін арнайы арналған мүлік жоқ, бірақ сіз білуі керек бірнеше амалдар бар.
Шегіністерді пайыз ретінде орнатыңыз. Егер сіз негізгі элементтің биіктігін білсеңіз және оның ішіне басқа блок элементін орналастырсаңыз, оны пайыздық толтыру арқылы ортаға қоюға болады. Мысалы, ата-ананың биіктігі 600 пиксель. Сіз оған биіктігі 300 пиксель болатын блокты орналастырасыз. Оны орталау үшін үстіңгі және астыңғы жағында қанша артқа шегіну керек? Әрқайсысы 150 пиксель, бұл ата-ана биіктігінің 25% құрайды.
Бұл әдіс өлшемдер есептеулерге мүмкіндік бергенде ғана теңестіруге мүмкіндік береді. Ал егер сіздің ата-анаңыздың биіктігі 887 пиксел болса, сіз ештеңені дәл жаза алмайсыз, бұл анық.
Кесте ұяшығына элементті кірістіріңіз. Қайтадан, егер тектік элементті кесте ұяшығына түрлендірсек, онда оған енгізілген блок автоматты түрде тік ортасына орналасады. Мұны істеу үшін ата-анаға вертикальді туралау: ортасын орнату жеткілікті.
Егер бұған қоса, біз маржа: 0 auto деп жазсақ, онда элемент көлденең ортасына орналасады!
-
Келесі
-
тамыр қабығы
-
Келесі
-
-
-
тамыр қабығы