CSS-те элементтерді көлденең және тік туралау. Блокты беттің ортасына туралаңыз

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

Сірә, сіз vertical-align тамаша CSS қасиетінің бар екенін білесіз.

Құдайдың өзі бізге дәл осы қасиетті тік туралау үшін пайдалануды бұйырды (оның мұндай түсінікті атауы бар екені бекер емес).

Мәселенің қойылымы: вертикальға қатысты ортасына орналасқан айнымалы биіктіктегі блоктың мазмұнын туралау қажет.

Енді мәселені шешуге кірісейік.

Сонымен, бізде блок бар, оның биіктігі өзгеруі мүмкін:

Мазмұнды блоктау

Сонымен, бізде блок бар, оның биіктігі өзгеруі мүмкін:

Бірінші ойға келесі финтті жасау керек: Сонымен, бізде блок бар, оның биіктігі өзгеруі мүмкін:деген сөз деуге толық негіз бар

div контейнерінің ортаңғы биіктігіне тураланады. Бірақ олай болмады! Бұл жолмен біз күтілетін орталықты теңестіруге қол жеткізе алмаймыз. Неліктен? Барлығы дұрыс көрсетілген сияқты. Бұл руб болып шықты: меншіктік туралау

кесте ұяшықтарының мазмұнын туралау немесе бір-біріне қатысты кірістірілген элементтерді туралау үшін ғана пайдалануға болады.

Кесте ұяшығының ішіндегі теңестіруге қатысты, менің ойымша, бәрі түсінікті. Бірақ кірістірілген элементтермен басқа жағдайды түсіндіремін.

Кірістірілген элементтерді тік туралау Сізде жол тегтері бойынша бөлінген мәтін жолы бар делік

бөліктерге:

Сізді мәтіннің бір бөлігі қарсы алады!

Кірістірілген тег - сыртқы түрі мазмұнды жаңа жолға орауға әкелмейтін контейнер.

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

бір жолда қалады. Контейнер

мәтіннің бір бөлігін арнайы пішімдеумен (оны түспен, басқа шрифтпен және т.б. бөлектеу) көрсету кезінде қолдануға ыңғайлы. Контейнерлер үшін

Келесі CSS сипаттарын қолданыңыз:

#perviy( vertical-align:sub; ) #vtoroy( vertical-align:3px; ) #tretiy(vertical-align:-3px; )

Нәтижедегі мәтін жолы келесідей болады:

Аздап алаңдап қалдық, енді негізгі міндетімізге ораламыз.

Div контейнеріндегі тік туралау

Қандай жағдай болмасын, div контейнерінде туралау үшін вертикальді туралау сипатын қолданамыз. Жоғарыда айтқанымдай, бұл сипатты кірістірілген элементтерді туралау жағдайында пайдалануға болады (біз бұл жағдайды жоғарыда егжей-тегжейлі талқыладық және ол div контейнерінде туралау үшін бізге жарамсыз); тек сол фактіні пайдалану ғана қалады Бірақ олай болмады! Бұл жолмен біз күтілетін орталықты теңестіруге қол жеткізе алмаймыз. Неліктен? Барлығы дұрыс көрсетілген сияқты. Бұл руб болып шықты: меншіккесте ұяшықтары үшін жұмыс істейді.

Мұны қалай пайдалана аламыз? Бізде үстел жоқ, біз div контейнерімен жұмыс істейміз.

Ха, бұл өте қарапайым болып шықты.

CSS дисплей қасиеті бізге div блогын кесте ұяшығына айналдыруға мүмкіндік береді, мұны оңай және табиғи түрде жасауға болады:

Бізде класс div бар делік мәтінді туралау:

Сонымен, бізде блок бар, оның биіктігі өзгеруі мүмкін:

Бұл блок үшін келесі CSS сипатын көрсетеміз:

Мәтінді теңестіру (дисплей: кесте ұяшығы; )

Бұл CSS нұсқауы біздің div-ті кез келген жолмен көрнекі түрде өзгертпей-ақ кесте ұяшығына айналдырады. Ал кесте ұяшығы үшін біз сипатты қолдана аламыз Бірақ олай болмады! Бұл жолмен біз күтілетін орталықты теңестіруге қол жеткізе алмаймыз. Неліктен? Барлығы дұрыс көрсетілген сияқты. Бұл руб болып шықты: меншіктолығымен және қалаған тік туралау жұмыс істейді.

Дегенмен, бәрі оңай аяқталмайды. Бізде тамаша IE браузері бар. Ол мүлікпен қалай жұмыс істеу керектігін білмейді дисплей: кесте-ұяшық(Мен сізге htmlbook.ru веб-сайтындағы әртүрлі браузерлердегі осы CSS қасиетінің функционалдығын суреттейтін кестені оқуды ұсынамын). Сондықтан біз әртүрлі қулыққа баруға мәжбүр боламыз.

Барлық браузерлер үшін div контейнерінде теңестіруге қол жеткізудің көптеген жолдары бар:

• Қосымша көмекші div контейнерін пайдалану әдісі
• Өрнекті қолдану әдісі. Бұл блок биіктігін күрделі есептеумен байланысты. Сіз мұны JavaScript білмей жасай алмайсыз.
• Line-height қасиетін пайдалану. Бұл әдіс белгілі биіктіктегі блокта тік туралау үшін ғана жарамды, сондықтан жалпы жағдайда қолданылмайды.
• IE браузері жағдайында абсолютті және салыстырмалы мазмұнды ауыстыруды пайдалану. Бұл әдіс маған ең түсінікті және қарапайым болып көрінеді. Оған қоса, ол айнымалы биіктіктегі div контейнері үшін іске асырылуы мүмкін. Біз оған толығырақ тоқталамыз.

Түсінгеніңіздей, біз жай ғана меншікті дұрыс түсінбеуімен байланысты IE-де тік туралау мәселесін шешуіміз керек. дисплей: кесте-ұяшық(IE6 да, IE7 де, IE8 де бұл сипатпен таныс емес). Сондықтан, IE тобының браузерлері үшін арнайы шартты түсініктемені пайдалана отырып, біз басқа CSS сипаттарын көрсетеміз.

Шартты түсініктеме

Құрылыс түрі:

... Шаршы жақшадағы шарт дұрыс болса ғана қолданылатын нұсқаулар...

шартты пікір деп аталады (абайлаңыз, шартты түсініктеменің түрі берілген мысалға толық сәйкес келуі керек, бос орынға дейін).

Мұндай шартты түсініктемедегі нұсқаулар осы кодты түсіндіретін браузер IE тобына жататын болса ғана орындалады.

Осылайша, шартты түсініктемені пайдалана отырып, біз IE-ден басқа барлық браузерлерден код бөлігін жасыра аламыз.

Мәселені шешу

Осы ақжелкеннің барлығына байланысты біз HTML кодымызды екі қосымша контейнермен қамтамасыз етуіміз керек. Біздің мәтіндік блок келесідей болады:

Бұл тексеру мәтінінің бір түрі.
Ол екі жолдан тұрады.

Div контейнер класы үшін мәтінді туралау CSS сипаттары оның мазмұнын барлық қалыпты браузерлер үшін тігінен туралайтын орнатылады (әрине IE қоспағанда):

Көрсеткіш: кесте-ұяшық; тік туралау: орта;

Блоктың ені мен биіктігін орнататын тағы екі қасиет:

Ені: 500px; биіктігі: 500px;

Бұл IE-ден басқа барлық браузерлерде контейнер мазмұнын тігінен туралау үшін жеткілікті.

Енді біз IE отбасының браузерлері үшін теңестіруге қатысты сипаттарды қоса бастаймыз (олар үшін біз қосымша блоктарды қолдандық. дивЖәне аралығы):

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

Div мәтінін теңестіру (орын: абсолютті; жоғарғы: 50%; )

Бұл дизайн мынаны білдіреді: класы бар блок ішіндегі барлық div тегтері үшін мәтінді туралауаталған қасиеттерді қолданыңыз.

Сәйкесінше, блок үшін көрсетілген стильдер мәтінді туралауөзгертілген:

Мәтінді теңестіру(дисплей: кесте ұяшығы; тігінен туралау: ортасы; ені: 500 пиксель; биіктігі: 500 пиксель; орны: салыстырмалы; )

Енді мәтіндік блоктың жоғарғы сол жақ нүктесі 50% төмен жылжытылды.

Не болып жатқанын түсіндіру үшін мен сурет салдым:

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

Енді тег іске қосылады аралығыжәне оның салыстырмалы орналасуы:

Мәтінді туралау аралығы( орны: салыстырмалы; жоғарғы: -50%; )

Осылайша, біз сары блокты бастапқы орнына қатысты биіктігінің 50% жоғары жылжыттық. Түсінгеніңіздей, сары блоктың биіктігі орталықтандырылған мазмұнның биіктігіне тең. Ал аралық контейнердегі соңғы операция біздің мазмұнды күлгін блоктың ортасына орналастырды. Ура!

Кішкене трюк ойнап көрейік

Ең алдымен, біз барлық қалыпты браузерлерден ақжелкенді жасырып, оны IE үшін ашуымыз керек. Мұны, әрине, шартты түсініктеме арқылы жасауға болады, біз онымен танысқанымыз бекер емес:

.textalign div( орны: абсолютті; жоғарғы: 50%; ) .textalign аралығы (позиция: салыстырмалы; жоғарғы: -50%; )

Кішкентай мәселе бар.

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

мәтінді туралау. Мүлікті егжей-тегжейлі біліңізтолып кету

жылы мүмкін. мәтінді туралауБлокқа арналған соңғы CSS нұсқаулары

пішіні бар:

Textlign(дисплей: кесте ұяшығы; тік туралау: орта; ені: 500 пиксель; биіктік: 500 пиксель; орны: салыстырмалы; толып кету: жасырын; жиек: 1 пиксель тұтас қара; ) мәтінді туралауКешіріңіз, мен бір маңызды нәрсені айтуды ұмытып кетіппін. Егер сіз сынып блогының биіктігін орнатуға тырыссаңыз

пайызбен есептесеңіз, сіз үшін ештеңе болмайды.

Айнымалы биіктік блогында орталықтандыру мәтінді туралауКөбінесе класс блогының биіктігін орнату қажеттілігі туындайды

пикселдерде емес, тектік блок биіктігінің пайызы ретінде және div контейнерінің мазмұнын ортаға туралаңыз. мәтінді туралауБұл кесте ұяшығы үшін мұны істеу мүмкін емес (бірақ сынып блогы қасиетінің арқасында кесте ұяшығына айналады).

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

, ата-аналық блоктың биіктігін қуана иеленеді.

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

. Енді біз биіктік мәнін 500 пиксельден, мысалы, 100%-ға қауіпсіз өзгерте аламыз. мәтінді туралауСонымен, сынып блогына арналған CSS сипаттары

келесідей болады:

Textlign(дисплей: кесте; ені: 500px; биіктік: 100%; орны: салыстырмалы; толып кету: жасырын; жиек: 1px тұтас қара; ) мәтінді туралау(бұл суреттегі бірдей сары блок), CSS қасиетін орнату керек қасиетінің арқасында кесте ұяшығына айналады, содан кейін ол тектік блоктан 100% биіктікке ие болады мәтінді туралау(күлгін блок). Орталықтағы кірістірілген div контейнерінің мазмұнын сипатпен теңестіруге ештеңе кедергі болмайды және туралау директивасын алып тастаңыз.

Контейнерде кірістірілген div блогы үшін CSS сипаттарының тағы бір қосымша тізімін аламыз мәтінді туралау.

Div мәтінін теңестіру (дисплей: кесте ұяшығы; тік туралау: орта; )

Бұл бүкіл трюк. Қаласаңыз, мазмұн ортасына қойылған айнымалы биіктікке ие бола аласыз.

Айнымалы биіктік блогының тік туралануы туралы қосымша ақпаратты қараңыз.

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

Белгілі өлшемдері бар блоктарды туралау

CSS пайдаланудың ең оңай жолы - белгілі биіктігі (тік туралау үшін) немесе ені (көлденеңінен туралау үшін) бар блоктарды туралау.

Толтырғышты пайдаланып туралау

Кейде элементті ортасына келтіре алмайсыз, бірақ оған «толтыру» қасиетін пайдаланып жиектерді қосасыз.

Мысалы, 200-ден 200 пиксельге дейінгі сурет бар және сіз оны 240-тан 300-ге дейінгі блоктың ортасына қоюыңыз керек. Біз сыртқы блоктың биіктігі мен енін = 200px орнатуға болады, ал жоғарғы және төменгі жағына 20 пиксель қосуға болады. , және сол жақта және оң жақта 50.

.example-wrapper1 ( фон : #535E73 ; ені : 200px ; биіктік : 200px ; толтыру : 20px 50px ; ) Абсолютті орналасқан блоктарды туралаңыз

Егер блок «позиция: абсолютті» күйіне орнатылса, оны «позициясы: салыстырмалы» арқылы ең жақын ата-анасына қатысты орналастыруға болады. Ол үшін барлық сипаттарға («жоғары», «оң», «төменгі», «сол»), сондай-ақ «маржа: авто» бірдей мәнді тағайындау керек.

*Нюанс бар: Ішкі блоктың ені (биіктігі) + сол жақтың (оң жақ, төменгі, жоғарғы) мәні негізгі блоктың өлшемдерінен аспауы керек. Сол жақ (оң жақ, төменгі, жоғарғы) қасиеттерге 0 (нөл) қою қауіпсіз.

.example-wrapper2 (позиция : салыстырмалы ; биіктік : 250px ; фон : url(space.jpg) ; ) .cat-king (ені : 200px ; биіктік : 200px ; позиция : абсолютті ; жоғарғы : 0 ; сол : 0 ; төменгі : 0 оңға : 0 фон : url(king.png) "мәтінді туралау: орталыққа";

Блоктағы мәтінді туралау үшін «мәтінді туралау» арнайы қасиеті бар. «Орталыққа» орнатылғанда, мәтіннің әрбір жолы көлденеңінен тураланады. Көп жолды мәтін үшін бұл шешім өте сирек пайдаланылады;

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

.мысал-мәтін (мәтінді туралау: ортасына; толтыру: 10px; фон: #FF90B8; )

Айта кетейік, бұл сипат тек мәтін үшін ғана емес, сонымен қатар кез келген кірістірілген элементтер үшін де («дисплей: кірістірілген») жұмыс істейді.

Бірақ бұл мәтін солға тураланған, бірақ ол қаптамаға қатысты ортада орналасқан блокта.

.example-wrapper3 (мәтінді туралау: ортасына; фон: #FF90B8; ) .inline-мәтін (дисплей: кірістірілген-блок; ені: 40%; толтыру: 10px; мәтінді туралау: солға; фон: #FFE5E5; ) туралау маржаны пайдаланып блоктар

Белгілі ені бар блок элементтерін "маржа-солға: авто; жиек-оңға: авто" күйіне орнату арқылы көлденеңінен оңай туралауға болады. Әдетте стенографиялық белгі қолданылады: «маржа: 0 авто» (нөлдің орнына кез келген мәнді қолдануға болады). Бірақ бұл әдіс тік туралау үшін жарамайды.

.lama-wrapper (биіктігі : 200px ; фон : #F1BF88 ; ) .lama1 (биіктігі : 200px ; ені : 200px ; фон : url(lama.jpg ; маржа : 0 авто ; )

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

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

Тігінен туралау әлдеқайда қиын - шамасы, бұл CSS-те қарастырылмаған. Қажетті нәтижеге жетудің бірнеше жолы бар, бірақ олардың барлығы өте әдемі емес.

Line-height қасиетімен туралау

Блокта бір ғана сызық болған жағдайда, оның тік туралануына «line-height» қасиетін қолдану және оны қажетті биіктікке орнату арқылы қол жеткізуге болады. Қауіпсіз жақта болу үшін «биіктікті» орнату керек, оның мәні «сызық биіктігі» мәніне тең болады, себебі соңғысына барлық браузерлерде қолдау көрсетілмейді.

.example-wrapper4 (жол биіктігі: 100px ; түс : #DC09C0 ; фон : #E5DAE1 ; биіктік : 100px ; мәтінді туралау: ортасына; )

Сондай-ақ блокты бірнеше сызықтармен теңестіруге қол жеткізуге болады. Мұны істеу үшін сізге қосымша қаптама блогын қолдануға және оған сызық биіктігін орнатуға тура келеді. Ішкі блок көп жолды болуы мүмкін, бірақ «кіріктірілген» болуы керек. Оған «тігінен туралау: ортасын» қолдану керек.

.example-wrapper5 (жол биіктігі: 160px ; биіктік : 160px ; шрифт өлшемі : 0 ; фон : #FF9B00 ; ) .example-wrapper5 .text1 (дисплей : inline-block ; font-size : 14px : line; 1.5 вертикальді туралау : орта : #FFFAF2 ;

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

Кестелердегі тік туралау

«Тік туралау» қасиеті кесте ұяшықтарына да әсер етеді. Мән «ортаға» орнатылғанда, ұяшық ішіндегі мазмұн ортаға тураланады. Әрине, кестенің орналасуы қазір архаикалық болып саналады, бірақ ерекше жағдайларда оны «дисплей: кесте ұяшығы» көрсету арқылы модельдеуге болады.

Мен бұл опцияны әдетте тік туралау үшін қолданамын. Төменде аяқталған жобадан алынған орналасу үлгісі берілген. Дәл осы жолмен тігінен орталықтандырылған сурет қызығушылық тудырады.

.one_product .img_wrapper (дисплей : кесте ұяшығы ; биіктік : 169px ; тік туралау : орта ; толып кету : жасырын ; фон : #fff ; ені : 255px ; ) .one_product img ( max-биіктігі : max-ені : 169px ; % min-width : 140px дисплей : блок : 0 auto ;

Есте сақтау керек, егер элементте «жоқ» дегеннен басқа «қалқымалы» жиыны болса, онда ол кез келген жағдайда блок болады (дисплей: блок) - онда қосымша блок орауышын пайдалануға тура келеді.

Қосымша кірістірілген элементпен туралау

Ал кірістірілген элементтер үшін «вертикальді туралау: ортасын» пайдалануға болады. Бұл жалпы орталық сызыққа қатысты бір жолда орналасқан барлық элементтерді "дисплей: кірістірілген" күймен туралайды.

Биіктігі ата-аналық блоктың биіктігіне тең көмекші блокты жасау керек, содан кейін қажетті блок орталықта болады. Ол үшін псевдоэлементтерді пайдалану ыңғайлы:befor or:after.

.example-wrapper6 (биіктігі : 300px ; мәтінді туралау : ортасына ; фон : #70DAF1 ; ) .pudge (дисплей : кірістірілген блок ; тік туралау : орта ; фон : url(pudge.png ) ; фон түсі : # fff : 200px биіктік .riki (дисплей : inline-block ; height : 100% ; vertical-align : middle ; ) Дисплей: иілу және туралау;

Егер сіз Explorer 8 пайдаланушыларына аса мән бермесеңіз немесе олар үшін қосымша JavaScript бөлігін енгізуге дайын болсаңыз, онда сіз «display: flex» пайдалана аласыз. Икемді қораптар туралау мәселелерін шешуде тамаша және мазмұнды ортасына қою үшін жай ғана «маржа: авто» деп жазыңыз.

Осы уақытқа дейін мен бұл әдісті ешқашан кездестірмедім, бірақ оған арнайы шектеулер жоқ.

.example-wrapper7 (дисплей : икемді ; биіктік : 300px ; фон : #AEB96A ; ) .example-wrapper7 img ( маржа : авто ; )

Міне, мен CSS туралау туралы жазғым келді. Енді мазмұнды орталықтандыру проблема болмайды!

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

Мәтінді тігінен туралауға кемінде бес түрлі жолмен қол жеткізуге болады. Олардың әрқайсысы жағдайдың мән-жайы мен егжей-тегжейлерін ескере отырып, өзінше жақсы. Біз бірнеше мысалдарды қарастырамыз және шарттарға сүйене отырып, сіз өзіңізге сәйкес айналдыруды таңдайсыз.

Сызық биіктігі бар бірінші әдіс

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

бірінші мысал. демо №1

бірінші мысал. демо №1

/* No.1 */ .talign1( жиек: 1px тұтас қызыл; биіктік:200px;/* блок биіктігі */ ) .talign1 > p( line-height:200px;/* блок биіктігіне сәйкес сызық биіктігін орнатыңыз * / маржа :0;/* сыртқы толтыруды жою, егер бар болса */ text-align:center;/* мәтінді ортасына көлденеңінен туралау */ padding: 0;/* ішкі толтыруды жою, егер бар болса */ ) /* соңы № 1*/

Дәл осылай, кескінді тік орталықта жүзеге асыруға болады, бірақ бір жаңа vertical-align қасиетін қосу арқылы: орта; .

Мысал. Демо №2

Мысал. Демо №2

/* No.2 */ .talign2( жиек: 1px тұтас қызыл; сызық биіктігі:200px;/* блок жолының биіктігі */ ) .talign2 div( text-align:center;/* элементтерді ортасына көлденеңінен туралау */ ) .talign2 img( vertical-align:middle;/* кескіндерді ортасына тігінен туралау */ жиегі: 1px тұтас қара; ) /* соңы №2*/

Позиция қасиетімен туралау

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

Сондықтан шеттерге теріс мән орнату керек. Жоғарғы жағындағы шегіністің өлшемі ішкі блоктың биіктігінің жартысына, ал сол жақтағы шегініс енінің жартысына сәйкес келуі керек. Осылайша абсолютті орталықты аламыз.

Бұл опцияда еншілес элементтің дәл биіктігі мен енін білу міндетті болуы мүмкін. Әйтпесе, дұрыс емес орталықтандыру орын алуы мүмкін.

/* No.3 */ .talign3( жиек: 1px тұтас қызыл; биіктік: 200px;/* блок биіктігі */ орны: салыстырмалы; ) .talign3 div( орны: абсолютті; жоғарғы: 50%; сол жақта: 50%; биіктік : 30% ені: -5% 0 0 -25% жиек: 1px қара;

Кесте қасиетімен туралау

Мұнда біз элементтерді ұяшықтары бар кестеге айналдыра отырып, ескі техниканы қолданамыз. Бұл жағдайда кесте тегтері

қолданылмайды, бірақ CSS сипаттарын пайдаланады, мысалы, display: table; , дисплей: кесте-ұяшық; . IE ескі нұсқаларында бұл әдіс жұмыс істемейді және қажет емес. Басқа біреу оларды шынымен пайдаланады ма?

Мысал. демонстрация №4

Мысал. демонстрация №4

/* No.4 */ .talign4( жиек: 1 пиксель тұтас қызыл; биіктік: 200 пиксель;/* блок биіктігі */ дисплей: кесте; ені: 100%; ) .talign4 div( дисплей: кесте ұяшығы; вертикалды туралау: ортасы ; text-align:center ) /* end #4*/

Flex қасиетімен туралау

Бұл веб-сайт орналасуында жиі кездеспейтін сипаттары бар нақтырақ нұсқа. Бірақ, соған қарамастан, сирек жағдайларда олар өте пайдалы.

Влад Мержевич

Кесте ұяшықтарының мазмұны бір уақытта көлденең және тігінен туралануы мүмкін болғандықтан, элементтердің бір-біріне қатысты орналасуын басқару мүмкіндіктері кеңейеді. Кестелер кескіндердің, мәтіннің, пішін өрістерінің және басқа элементтердің бір-біріне және тұтастай веб-бетке қатысты туралануын орнатуға мүмкіндік береді. Жалпы алғанда, теңестіру негізінен әртүрлі элементтер арасында көрнекі байланыстарды орнату, сондай-ақ оларды біріктіру үшін қажет.

Тік орталықтандыру

Келушіге сайттың фокусы мен атауын көрсетудің бір жолы - шашырау бетін пайдалану. Бұл, әдетте, флэш экраны немесе сайттың негізгі идеясын білдіретін суреті бар бірінші бет. Сурет сонымен қатар сайттың басқа бөлімдеріне сілтеме болып табылады. Монитордың ажыратымдылығына қарамастан, бұл кескінді браузер терезесінің ортасына орналастыру керек. Осы мақсатта ені мен биіктігі 100% болатын кестені пайдалануға болады (1-мысал).

1-мысал: Сызбаны ортаға қою

TABLE туралау ( ені: 100%; /* кесте ені */ биіктігі: 100%; /* кесте биіктігі */ )

Бұл мысалда көлденең туралау align="center" тег параметрі арқылы орнатылады , және ұяшықтың мазмұны тігінен орталанбауы мүмкін, себебі бұл әдепкі орын.

Кесте биіктігін 100% орнату үшін жою керек, код енді жарамсыз болады.

Веб-беттің барлық қол жетімді аймағын жабу үшін ені мен биіктігін пайдалану кесте мазмұнының өлшеміне қарамастан браузер терезесінің дәл ортасына туралануын қамтамасыз етеді.

Көлденең туралау

Тегтің align (көлденең туралау) және valign (тік туралау) атрибуттарын біріктіру арқылы , элементтердің бір-біріне қатысты орналасуының бірнеше түрін орнатуға рұқсат етіледі. Суретте. 1-суретте элементтерді көлденеңінен туралау жолдары көрсетілген.

Төмендегі суретке сәйкес мәтінді туралаудың кейбір мысалдарын қарастырайық.

Жоғарғы туралау

Тег үшін ұяшық мазмұнының жоғарғы туралануын көрсету үшін valign төлсипатын жоғарғы мәнмен орнату керек (2-мысал).

2-мысал: valign пайдалану

Туралау

1-баған

2-баған

Бұл мысалда ұяшық сипаттамалары тег параметрлері арқылы басқарылады , бірақ стильдер арқылы өзгерту ыңғайлырақ.

Атап айтқанда, ұяшықтардағы туралау тік туралау және мәтінді туралау сипаттары арқылы көрсетіледі (3-мысал).

3-мысал: туралау үшін стильдерді қолдану

1-баған

2-баған

Туралау TABLE ( ені: 100%; /* Кесте ені */ ) #col1 ( ені: 75%; /* Бірінші баған ені */ фон: #f0f0f0; /* Бірінші баған фонының түсі */ ) #col2 ( ені: 25 %; /* Екінші бағанның ені */ фон: #fc5; /* Екінші бағанның фон түсі */ text-align: оң жаққа туралау */ ) #col1, #col2 ( vertical-align: top ; / * Жоғарғы туралау */ толтыру: 5px /* ұяшық мазмұнының айналасындағы шеттер */ )

Кодты қысқарту үшін бұл мысал селекторларды топтастыруды пайдаланады, себебі тік туралау және толтыру сипаттары бір уақытта екі ұяшыққа қолданылады.

Төменгі туралау дәл осылай орындалады, бірақ жоғарғы мәннің орнына төменгі қолданылады.

Орталыққа туралау

Әдепкі бойынша, ұяшық мазмұны тік сызықтың ортасына тураланады, сондықтан бағандардың биіктіктері әртүрлі болса, туралауды жоғарғы жиекке орнату керек.

Кейде сіз әлі де бастапқы туралау әдісін қалдыруыңыз керек, мысалы, формулаларды орналастырған кезде, суретте көрсетілгендей. 2.

Туралау

(18.6)

Бұл жағдайда формула браузер терезесінің дәл ортасында, ал оның нөмірі оң жақ шетінде орналасқан. Элементтерді осылай орналастыру үшін сізге үш ұяшықтан тұратын кесте қажет болады. Ең шеткі ұяшықтардың өлшемдері бірдей болуы керек, ортаңғы ұяшықта туралау орталықта, ал оң жақта - оң жақ жиегі бойынша орындалады (4-мысал). Бұл ұяшықтар саны формуланың орталықта орналасуын қамтамасыз ету үшін қажет.

4-мысал: Формулаларды туралау

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

Пішін элементтерін туралау

Кестелерді пайдалана отырып, пішін өрістерінің орнын анықтау ыңғайлы, әсіресе олар мәтінмен қиылысады. Пікір енгізуге арналған пішіннің дизайн нұсқаларының бірі суретте көрсетілген. 3.

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

5-мысал: Пішін өрістерін туралау
Туралау
Аты

Бұл мысалда оң жаққа туралау қажет ұяшықтар үшін align="right" төлсипаты қосылады.

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

Егер сіз html негізінде жасалған кез келген веб-сайтты кесіп алсаңыз, сіз белгілі бір қабатты құрылымды көресіз. Оның үстіне, оның сыртқы түрі қабат тортына ұқсас болады. Егер сіз солай ойласаңыз, сіз ұзақ уақыт бойы тамақ ішпеген шығарсыз. Сондықтан алдымен аштықты қанағаттандырыңыз, содан кейін сайтыңыздағы div қабатын қалай орталықтандыру керектігін айтамыз:

Тегті қолдану арқылы макеттің артықшылықтары

• Веб-сайт құрылымының екі негізгі түрі бар:
• Кестелік;

Блоктау.

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

Кесте макетін пайдаланған кезде веб-бет толығымен жүктелмейінше көрсетілмейді. Div блоктарын пайдаланған кезде элементтер бірден көрсетіледі.

Жоғары жүктеу жылдамдығынан басқа, веб-сайтты блоктау html кодының көлемін бірнеше есе азайтуға мүмкіндік береді. Соның ішінде CSS сыныптарын пайдалану арқылы.

Дегенмен, кестелік орналасуды беттегі деректерді көрсетуді құрылымдау үшін пайдалану керек. Оны пайдаланудың классикалық мысалы - кестелерді көрсету.

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

Орналастыру құралдары
Блок орналасуында каскадты стиль кестелерін пайдаланып қабаттарды орналастырған дұрыс. Орналасуға жауапты негізгі CSS қасиеті - float.
Меншік синтаксисі:
қалқымалы: сол жақ | дұрыс | ешқайсысы | мұрагер

• Қайда:
• сол жақ – элементті экранның сол жақ шетіне туралаңыз. Қалған элементтердің айналасындағы ағын оң жақта орын алады;
• оң жақта – оң жақта туралау, басқа элементтердің айналасында ағын – сол жақта;
• жоқ – орау рұқсат етілмейді;

inherit – негізгі элементтің мәнін мұраға алады.

#left ( ені: 200px; биіктігі: 100px; қалқымалы: солға; фон: rgb(255,51,102); ) #right (ені: 200px; биіктік: 100px; қалқымалы: оң; фон: rgb(0,255,153); ) Сол жақ блок Оң жақ блок

Енді біз үшінші div-ті беттің ортасына орналастыру үшін сол сипатты қолдануға тырысамыз. Бірақ, өкінішке орай, float орталық мәніне ие емес. Ал жаңа блокқа оңға немесе солға туралау мәнін бергенде, ол көрсетілген бағытта жылжытылады. Сондықтан барлық үш блокқа float: left параметрін орнату ғана қалады:

Бірақ бұл да ең жақсы нұсқа емес. Терезенің өлшемі кішірейген кезде барлық қабаттар бір қатарға тігінен тізіледі, ал өлшемді үлкейткен кезде терезенің сол жақ шетіне жабысады. Сондықтан бізге div ортасына қоюдың жақсы жолы қажет.

Қабаттарды орталықтандыру

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

#контейнер ( ені: 600px; жиегі: 0 авто; ) #сол (ені: 200px; биіктік: 100px; қалқымалы: солға; фон: rgb(255,51,102); ) #right (ені: 200px; биіктік: 100px; қалқымалы) : сол жақтағы фон: rgb(0,255,153);

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

Өзгерістерден кейін барлық блоктар ортасында қатаң түрде қатарға тұрады. Олардың орналасуы браузер терезесінің өлшеміне қарамастан өзгермейді. Міне, div-ді тігінен ортаға қою келесідей:

Келесі мысалда біз контейнер ішіндегі қабаттарды ортаға салу үшін бірнеше жаңа CSS сипаттарын қолдандық:

#контейнер (ені: 450 пиксель; биіктік: 150 пиксель; шеті: 0 авто; фон-түсі:#66CCFF; ) #left (ені: 100px; биіктік: 100px; фон: rgb(255,51,102); дисплей: кірістірілген блок; вертикаль бойынша туралау: орта; жиек-сол: 35 пиксель; #центр (ені: 100px; биіктік: 100px; фон: rgb(255,0,0); дисплей: кірістірілген блок; тік туралау: орта; жиегі-сол: 35px; )

CSS сипаттарының қысқаша сипаттамасы және біз осы мысалда div ішінде div ортасына келтіру үшін пайдаланған мәндері:

• дисплей: inline-block – блок элементін сызыққа туралайды және оның басқа элементтің айналасына оралуын қамтамасыз етеді;
• vertical-align: middle – негізгі элементке қатысты ортадағы элементті туралайды;
• margin-left – сол жақ жиекті орнатады.

Қабаттан сілтемені қалай жасауға болады

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

#layer1( ені: 500px; биіктік: 100px; фон: rgb(51,255,204); жиек: Groove; ) a (дисплей: блок; мәтінді туралау: орталық; биіктік: 100%; түс: rgb(255,0,51) ; ) Біздің веб-сайтқа сілтеме

Бұл мысалда жолды көрсету арқылы: блок, біз блок элементінің мәніне сілтеме орнатамыз. Және div блогының бүкіл биіктігі сілтемеге айналуы үшін биіктік орнатыңыз: 100%.

Блок элементтерін жасыру және көрсету

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

Бұл, әсіресе, жарнама құны ең жоғары болатын басты бетке қатысты. Сондықтан, басқа жарнамалық баннерді қайда «итеру» мәселесі туындайды. Мұнда сіз div-ді беттің ортасына туралаудан құтыла алмайсыз!

Неғұрлым ұтымды шешім - кейбір блокты жасыру. Міне, осындай іске асырудың қарапайым мысалы:

#layer1( display:block; ені: 500px; биіктігі: 100px; фон: rgb(51,255,204); border:groove; ) show() функциясы (if(layer1=="жоқ") ( layer1="block"; ) else ( layer1="жоқ"; ) document.getElementById("layer1").style.display=layer1 )

Бұл сиқырлы түйме. Оны басу жасырын блокты жасырады немесе көрсетеді.

Бұл мысалда div блоктарының орны ешбір жолмен өзгермейді. Бұл түймені басқаннан кейін CSS дисплей сипатының мәнін өзгертетін қарапайым JavaScript функциясын пайдаланады (onclick оқиғасы).

көрсету синтаксисі:
көрсету: блок | кірістірілген | кірістірілген блок | кірістірілген кесте | тізім элементі | ешқайсысы | кіру | кесте | кесте тақырыбы | кесте ұяшығы | кесте-баған-тобы | кесте-баған | table-footer-group | кесте тақырыбы-тобы | кесте жолы | кесте-жол-тобы

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

Біз қабатты жасыру және көрсету үшін дисплей сипаты үшін екі мәнді қолдандық.