Div នៅកណ្តាលទំព័រ css ។ របៀបដាក់ប្លុក DIV កណ្តាលដោយប្រើរឹមស្វ័យប្រវត្តិ។ តម្រឹមជាមួយការផ្លាស់ប្តូរ

មានវិធីផ្សេងគ្នាជាមូលដ្ឋានមួយចំនួនដើម្បីដាក់កណ្តាលវត្ថុមួយបញ្ឈរដោយប្រើ CSS ប៉ុន្តែការជ្រើសរើសត្រឹមត្រូវអាចជាល្បិច។ យើងនឹងពិនិត្យមើលខ្លះៗ ហើយក៏បង្កើតគេហទំព័រតូចមួយដោយប្រើចំណេះដឹងដែលទទួលបាន។

ការតម្រឹមកណ្តាលបញ្ឈរមិនងាយស្រួលទេក្នុងការសម្រេចបានដោយប្រើ CSS ។ មានវិធីជាច្រើន ហើយមិនមែនដំណើរការទាំងអស់នៅក្នុងកម្មវិធីរុករកទាំងអស់នោះទេ។ តោះមើល ៥ វិធីសាស្រ្តផ្សេងៗក៏ដូចជាគុណសម្បត្តិ និងគុណវិបត្តិនៃពួកគេម្នាក់ៗ។ ឧទាហរណ៍។

វិធីសាស្រ្តទី 1

វិធីសាស្រ្តនេះសន្មត់ថាយើងកំណត់ធាតុមួយចំនួនដើម្បីបង្ហាញជាតារាង បន្ទាប់មកយើងអាចប្រើលក្ខណសម្បត្តិតម្រឹមបញ្ឈរនៅលើវា (ដែលធ្វើការខុសគ្នានៅក្នុងធាតុផ្សេងៗគ្នា)។

ព័ត៌មានមានប្រយោជន៍មួយចំនួនដែលគួរតែស្ថិតនៅកណ្តាល។

#wrapper(បង្ហាញ៖ តារាង;) #cell(បង្ហាញ៖ ក្រឡាតារាង; តម្រឹមបញ្ឈរ៖ កណ្តាល;)

គុណសម្បត្តិ
មាតិកាអាចផ្លាស់ប្តូរកម្ពស់ថាមវន្ត (កម្ពស់មិនត្រូវបានកំណត់នៅក្នុង CSS) ។

ខ្លឹមសារមិនត្រូវបានកាត់ផ្តាច់ទេ ប្រសិនបើមិនមានកន្លែងគ្រប់គ្រាន់សម្រាប់វា។

គុណវិបត្តិ
មិនដំណើរការក្នុង IE 7 ឬតិចជាងនេះទេ។

ស្លាកជាច្រើនដែលជាប់គាំង

វិធីសាស្រ្តទី 2 វិធីសាស្រ្តនេះប្រើទីតាំងដាច់ខាត

div ដែលផ្នែកខាងលើត្រូវបានកំណត់ទៅ 50% និងរឹមកំពូល (រឹមកំពូល) ដើម្បីដកពាក់កណ្តាលនៃកម្ពស់មាតិកា។ នេះបញ្ជាក់ថាវត្ថុត្រូវតែមានកម្ពស់ថេរ ដែលត្រូវបានកំណត់នៅក្នុងរចនាប័ទ្ម CSS ។

ដោយសារកម្ពស់ត្រូវបានជួសជុល អ្នកអាចកំណត់ការហូរហៀរ៖ ស្វ័យប្រវត្តិ។ សម្រាប់ div ដែលមានខ្លឹមសារ ដូច្នេះប្រសិនបើមាតិកាមិនសម របាររមូរនឹងបង្ហាញឡើង។

#wrapper(បង្ហាញ៖ តារាង;) #cell(បង្ហាញ៖ ក្រឡាតារាង; តម្រឹមបញ្ឈរ៖ កណ្តាល;)

មាតិកានៅទីនេះ #មាតិកា (ទីតាំង៖ ដាច់ខាត; កំពូល៖ ៥០%; កម្ពស់៖ ២៤០ភីច; រឹមកំពូល៖ -១២០ភីច; /* ដកពាក់កណ្តាលកម្ពស់ */)
ដំណើរការនៅក្នុងកម្មវិធីរុករកទាំងអស់។

មិនមានសំបុកដែលមិនចាំបាច់ទេ។

នៅពេលដែលមិនមានកន្លែងទំនេរគ្រប់គ្រាន់ ខ្លឹមសារនឹងរលាយបាត់ (ឧទាហរណ៍ div នៅខាងក្នុង ហើយអ្នកប្រើប្រាស់បានធ្វើឱ្យ windows តូចជាងមុន ក្នុងករណីនេះរបាររមូរនឹងមិនលេចឡើងទេ។

វិធីសាស្រ្តទី 3

នៅក្នុងវិធីសាស្រ្តនេះ យើងនឹងរុំមាតិកា div ជាមួយ div ផ្សេងទៀត។ ចូរកំណត់កម្ពស់របស់វាទៅ 50% (កម្ពស់: 50%;) និងរឹមខាងក្រោមទៅពាក់កណ្តាលកម្ពស់ (រឹម-បាត:-មាតិកាកម្ពស់;)។ ខ្លឹមសារនឹងជម្រះអណ្តែត និងស្ថិតនៅកណ្តាល។

#wrapper(បង្ហាញ៖ តារាង;) #cell(បង្ហាញ៖ ក្រឡាតារាង; តម្រឹមបញ្ឈរ៖ កណ្តាល;)

មាតិកានៅទីនេះ #មាតិកា (ទីតាំង៖ ដាច់ខាត; កំពូល៖ ៥០%; កម្ពស់៖ ២៤០ភីច; រឹមកំពូល៖ -១២០ភីច; /* ដកពាក់កណ្តាលកម្ពស់ */)
នៅពេលដែលមិនមានកន្លែងទំនេរគ្រប់គ្រាន់ (ឧទាហរណ៍ នៅពេលដែលបង្អួចត្រូវបានកាត់បន្ថយ) មាតិកាមិនត្រូវបានច្រឹបទេ របាររមូរនឹងលេចឡើង។

ខ្ញុំអាចគិតបានតែរឿងមួយប៉ុណ្ណោះ៖ ធាតុទទេបន្ថែមកំពុងត្រូវបានប្រើ។

វិធីសាស្រ្តទី 4 ។

វិធីសាស្រ្តនេះប្រើទីតាំង៖ absolute; សម្រាប់ div ជាមួយ ទំហំថេរ(ទទឹងនិងកំពស់) ។ បន្ទាប់មកយើងកំណត់កូអរដោនេរបស់វាខាងលើ៖ ០; បាត: 0; ប៉ុន្តែ ដោយសារវាមានកម្ពស់ថេរ វាមិនអាចលាតសន្ធឹង និងតម្រឹមទៅកណ្តាលបានទេ។ នេះគឺស្រដៀងទៅនឹងវិធីសាស្រ្តដែលគេស្គាល់ច្បាស់ ការតម្រឹមផ្ដេកនៅកណ្តាល ធាតុប្លុកទទឹងថេរ (រឹម៖ ០ ស្វ័យប្រវត្តិ;) ។

ព័ត៌មានសំខាន់។

#wrapper(បង្ហាញ៖ តារាង;) #cell(បង្ហាញ៖ ក្រឡាតារាង; តម្រឹមបញ្ឈរ៖ កណ្តាល;)

#មាតិកា(ទីតាំង៖ ដាច់ខាត; កំពូល៖ ០; បាត៖ ០; ឆ្វេង៖ ០; ស្ដាំ៖ ០; រឹម៖ ស្វ័យប្រវត្តិ; កម្ពស់៖ ២៤០ភីច; ទទឹង៖ ៧០%;)

សាមញ្ញណាស់។ មិនដំណើរការនៅក្នុង
Internet Explorer

ខ្លឹមសារនឹងត្រូវបានកាត់ផ្តាច់ដោយគ្មានរបាររមូរ ប្រសិនបើមិនមានកន្លែងទំនេរគ្រប់គ្រាន់នៅក្នុងធុង។

វិធីសាស្រ្តទី 5

ដោយប្រើវិធីនេះ អ្នកអាចតម្រឹមកណ្តាលនៃអត្ថបទមួយ។ យើងគ្រាន់តែកំណត់កម្ពស់អត្ថបទ (កម្ពស់បន្ទាត់) ស្មើនឹងកម្ពស់ធាតុ (កម្ពស់)។ បន្ទាប់ពីនេះបន្ទាត់នឹងត្រូវបានបង្ហាញនៅកណ្តាល។

#wrapper(បង្ហាញ៖ តារាង;) #cell(បង្ហាញ៖ ក្រឡាតារាង; តម្រឹមបញ្ឈរ៖ កណ្តាល;)

មាតិកានៅទីនេះ #មាតិកា (ទីតាំង៖ ដាច់ខាត; កំពូល៖ ៥០%; កម្ពស់៖ ២៤០ភីច; រឹមកំពូល៖ -១២០ភីច; /* ដកពាក់កណ្តាលកម្ពស់ */)
បន្ទាត់មួយចំនួននៃអត្ថបទ #មាតិកា (កម្ពស់: 100px; កម្ពស់បន្ទាត់: 100px; )

មិនត្រូវកាត់អត្ថបទទេប្រសិនបើវាមិនសម។
ដំណើរការតែជាមួយអត្ថបទ (មិនដំណើរការជាមួយធាតុប្លុក) ។

ប្រសិនបើមានអត្ថបទច្រើនជាងមួយ វាមើលទៅអាក្រក់ណាស់។

វិធីសាស្ត្រនេះមានប្រយោជន៍ខ្លាំងណាស់សម្រាប់ធាតុតូចៗ ដូចជាការដាក់កណ្តាលអត្ថបទក្នុងប៊ូតុង ឬវាលអត្ថបទ។

ឥឡូវអ្នកដឹងពីរបៀបដើម្បីសម្រេចបាននូវការតម្រឹមកណ្តាលបញ្ឈរ ចូរយើងបង្កើតគេហទំព័រសាមញ្ញមួយដែលនឹងមានរូបរាងដូចនេះ៖

ជំហានទី 1

វាតែងតែជាការល្អដើម្បីចាប់ផ្តើមជាមួយនឹងការសម្គាល់តាមន័យធៀប។ ទំព័ររបស់យើងនឹងត្រូវបានរៀបចំដូចខាងក្រោមៈ

#floater (ទៅមាតិកាកណ្តាល)

#កណ្តាល (ធាតុកណ្តាល)
- # ចំហៀង
- #ឡូហ្គោ
- #nav (បញ្ជី
# មាតិកា

#បាត (សម្រាប់រក្សាសិទ្ធិ និងអ្វីៗទាំងអស់)

តោះសរសេរ html markup ខាងក្រោម៖

ក្រុមហ៊ុនកណ្តាល A ក្រុមហ៊ុន
ផ្ទះ
ផលិតផល
ប្លុក
ទំនាក់ទំនង

អំពី

ចំណងជើងទំព័រ

ការបញ្ចូលតម្លៃបន្ថែមរបស់វិស្វករឡើងវិញជារួមបន្ទាប់ពីការសហការដែលផ្តោតលើដំណើរការ និងការចែករំលែកគំនិត។

ទទួលយកការត្រៀមខ្លួនតាមគេហទំព័រតាមបំណងប្រកបដោយប្រសិទ្ធភាព ជាជាងដំណើរការដែលណែនាំដោយអតិថិជន។ ពង្រឹងភាពចាំបាច់ឆ្លងវេទិកាដោយអះអាង ធៀបនឹងបច្ចេកវិទ្យាសកម្ម។ ផ្តល់សិទ្ធិអំណាចដល់សេវាមេតាពហុវិន័យយ៉ាងងាយស្រួល ដោយមិនមានចំណុចប្រទាក់ទូទាំងសហគ្រាស។

សម្រួលតំបន់ប្រធានបទជាយុទ្ធសាស្ត្រប្រកួតប្រជែងយ៉ាងងាយស្រួលជាមួយនឹងទីផ្សារអេឡិចត្រូនិចដែលផ្តោតលើ។ Phosfluorescently ប្រមូលផ្តុំសហគមន៍លំដាប់ពិភពលោក ធៀបនឹងទីផ្សារបន្ថែមតម្លៃ។ បង្កើតសេវាកម្មរួមឡើងវិញឲ្យបានត្រឹមត្រូវ មុនពេលសេវាកម្មអេឡិចត្រូនិចដ៏រឹងមាំ។

ការជូនដំណឹងអំពីការរក្សាសិទ្ធិមាននៅទីនេះ

ជំហានទី 2

ឥឡូវនេះយើងនឹងសរសេរ CSS សាមញ្ញបំផុតដើម្បីដាក់ធាតុនៅលើទំព័រ។ អ្នកគួរតែរក្សាទុកកូដនេះនៅក្នុងឯកសារ style.css ។ វាគឺសម្រាប់នេះដែលតំណភ្ជាប់ត្រូវបានសរសេរនៅក្នុងឯកសារ html ។

Html, body ( margin: 0; padding: 0; height: 100%; ) body ( background: url("page_bg.jpg") 50% 50% no-repeat #FC3; font-family: Georgia, Times, serifs; ) #floater (ទីតាំង៖ ទាក់ទង; អណ្តែត៖ ឆ្វេង; កម្ពស់៖ ៥០%; រឹម-បាត៖ -២០០px; ទទឹង៖ ១px; ) #centered (ទីតាំង៖ ទាក់ទង; ច្បាស់៖ ឆ្វេង; កម្ពស់៖ ៤០០px; ទទឹង៖ ៨០%; អតិបរមា -width: 800px; min-width: 400px រឹម: 0 auto; បាត : 0 ;

មុននឹងធ្វើឱ្យមជ្ឈមណ្ឌលមាតិការបស់យើងតម្រឹម យើងត្រូវកំណត់កម្ពស់តួ និង html ដល់ 100% ។ ដោយសារកម្ពស់ត្រូវបានគណនាដោយគ្មានទ្រនាប់ខាងក្នុង និងខាងក្រៅ (ទ្រនាប់ និងរឹម) យើងកំណត់ពួកវា (ទ្រនាប់) ដល់ 0 ដើម្បីកុំឱ្យមានរបាររមូរ។

រឹមខាងក្រោមសម្រាប់ធាតុ "floater" គឺស្មើនឹងដកពាក់កណ្តាលនៃកម្ពស់មាតិកា (400px) ពោលគឺ -200px ;

ទំព័ររបស់អ្នកគួរតែមើលទៅដូចនេះ៖ # ទទឹងធាតុកណ្តាល 80% ។ វាធ្វើឱ្យគេហទំព័ររបស់យើងតូចចង្អៀតនៅលើអេក្រង់តូច និងធំជាងនៅលើអេក្រង់ធំ។ គេហទំព័រភាគច្រើនមើលទៅមិនសមរម្យនៅពេលថ្មី។ម៉ូនីទ័រធំទូលាយ

ដោយសារ #centered element មាន position:relative set យើងអាចប្រើទីតាំងដាច់ខាតនៃធាតុនៅក្នុងវា។ បន្ទាប់មកកំណត់ overflow: auto; សម្រាប់ធាតុ #មាតិកា ដូច្នេះរបាររមូរលេចឡើងប្រសិនបើមាតិកាមិនសម។

ជំហានទី 3

រឿងចុងក្រោយដែលយើងនឹងធ្វើគឺបន្ថែមរចនាប័ទ្មមួយចំនួនដើម្បីធ្វើឱ្យទំព័រមើលទៅទាក់ទាញជាងមុនបន្តិច។ តោះចាប់ផ្តើមជាមួយម៉ឺនុយ។

#nav ul (list-style: none; padding: 0; margin: 20px 0 0 0; text-indent: 0; ) #nav li ( padding: 0; margin: 3px; ) #nav li a ( display: block; ពណ៌ផ្ទៃខាងក្រោយ៖ #e8e8e8; រឹម៖ 0; : #777; ) #nav li a:hover::after ( margin: 0 0 0 7px; color: #f93; ) #nav li a:active ( padding: 8px 7px 6px 7px; )

រឿងដំបូងដែលយើងបានធ្វើដើម្បីធ្វើឱ្យម៉ឺនុយមើលទៅប្រសើរជាងមុនគឺត្រូវដកចំណុចចេញដោយកំណត់រចនាប័ទ្មបញ្ជី: គ្មានគុណលក្ខណៈ ហើយក៏កំណត់បន្ទះ និងបន្ទះផងដែរ ព្រោះវាប្រែប្រួលយ៉ាងខ្លាំងតាមលំនាំដើមនៅក្នុងកម្មវិធីរុករកផ្សេងៗគ្នា។

សូមកត់សម្គាល់ថា យើងបានបញ្ជាក់ថាតំណគួរត្រូវបានបង្ហាញជាធាតុប្លុក។ ឥឡូវនេះនៅពេលដែលបង្ហាញពួកវាត្រូវបានលាតសន្ធឹងតាមទទឹងទាំងមូលនៃធាតុដែលពួកគេមានទីតាំងនៅ។

ផ្សេងៗ រឿងគួរឱ្យចាប់អារម្មណ៍ដែលយើងប្រើសម្រាប់ម៉ឺនុយគឺ pseudo-classes:before and:after . ពួកគេអនុញ្ញាតឱ្យអ្នកបន្ថែមអ្វីមួយមុន និងក្រោយធាតុមួយ។ នេះ។ វិធីល្អ។បន្ថែមរូបតំណាង ឬនិមិត្តសញ្ញាដូចជាព្រួញនៅចុងបញ្ចប់នៃតំណនីមួយៗ។ ល្បិចនេះមិនដំណើរការនៅក្នុង Internet Explorer 7 និងខាងក្រោមទេ។

ជំហានទី 4

ហើយជាចុងក្រោយ យើងនឹងបន្ថែមវីសមួយចំនួនទៅក្នុងការរចនារបស់យើងដើម្បីឱ្យកាន់តែស្រស់ស្អាត។

#centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( font-family: Helvetica, Arial, sans- serif; font-weight: normal; color: #666; padding-top: 0; ) #bottom ( padding: 10px; font-size: 0.7em; color: #f03; ) #logo (font-size: 2em; text-align: center; color: #999; ) #logo ខ្លាំង ( font-weight: normal; ) #logo span ( display: block; font-size: 4em; line-height: 0.7em; color: #666; ) p, h2, h3 ( line-height: 1.6em; ) a (ពណ៌៖ #f03; )

នៅក្នុងរចនាប័ទ្មទាំងនេះ យើងកំណត់ជ្រុងមូលសម្រាប់ធាតុ #កណ្តាល។ នៅក្នុង CSS3 វានឹងត្រូវបានធ្វើដោយលក្ខណសម្បត្តិព្រំដែន-កាំ។ វាមិនទាន់ត្រូវបានអនុវត្តដោយកម្មវិធីរុករកមួយចំនួនទេ លើកលែងតែប្រើបុព្វបទ -moz និង -webkit សម្រាប់ Mozilla Firefoxនិង Safari/Webkit ។

ភាពឆបគ្នា។

ដូចដែលអ្នកប្រហែលជាបានទាយរួចហើយ ប្រភពចម្បងនៃបញ្ហាដែលត្រូវគ្នាគឺ Internet Explorer៖

ធាតុ #floater ត្រូវតែមានសំណុំទទឹង
IE 6 មានចន្លោះបន្ថែមជុំវិញម៉ឺនុយ

ប្រសិនបើអ្នកកាត់គេហទំព័រណាមួយដែលបានបង្កើតនៅលើ html ផ្អែកលើបន្ទាប់មករចនាសម្ព័ន្ធស្រទាប់ដោយស្រទាប់ជាក់លាក់មួយនឹងបង្ហាញនៅពីមុខអ្នក។ លើសពីនេះទៅទៀតជាមួយនឹងរបស់គាត់ផ្ទាល់ រូបរាងវានឹងស្រដៀងនឹងនំស្រទាប់។ ប្រសិនបើវាហាក់ដូចជាអ្នក នោះទំនងជាអ្នកមិនបានញ៉ាំយូរមកហើយ។ ដូច្នេះជាដំបូង បំពេញការស្រេកឃ្លានរបស់អ្នក ហើយបន្ទាប់មកយើងនឹងប្រាប់អ្នកពីរបៀបដាក់ស្រទាប់ div កណ្តាលនៅលើគេហទំព័ររបស់អ្នក៖

គុណសម្បត្តិនៃប្លង់ដោយប្រើស្លាក

រចនាសម្ព័ន្ធគេហទំព័រមានពីរប្រភេទសំខាន់ៗ៖

តារាង;
ទប់ស្កាត់។

ប្លង់តារាងមានភាពលេចធ្លោ សូម្បីតែនៅព្រឹកព្រលឹមនៃអ៊ីនធឺណិត។ គុណសម្បត្តិរបស់វារួមមានភាពត្រឹមត្រូវនៃទីតាំងដែលបានបញ្ជាក់។ ប៉ុន្តែយ៉ាងណាក៏ដោយ វាមានចំណុចខ្វះខាតជាក់ស្តែង។ ចំណុចសំខាន់គឺបរិមាណនៃកូដនិង ល្បឿនទាបការទាញយក

នៅពេលប្រើប្លង់តារាង គេហទំព័រនឹងមិនត្រូវបានបង្ហាញរហូតដល់ ផ្ទុកពេញ. ខណៈពេលដែលនៅពេលប្រើប្លុក div ធាតុត្រូវបានបង្ហាញភ្លាមៗ។

លើកលែងតែ ល្បឿនលឿនការផ្ទុកសំណង់ប្លុកនៃគេហទំព័រអនុញ្ញាតឱ្យអ្នកកាត់បន្ថយចំនួនកូដ html ច្រើនដង។ រួមទាំងតាមរយៈការប្រើប្រាស់ថ្នាក់ CSS ។

ទោះជាយ៉ាងណាក៏ដោយ ប្លង់តារាងគួរតែត្រូវបានប្រើដើម្បីកំណត់រចនាសម្ព័ន្ធការបង្ហាញទិន្នន័យនៅលើទំព័រ។ ឧទាហរណ៍បុរាណនៃការប្រើប្រាស់របស់វាគឺការបង្ហាញតារាង។

ការសាងសង់ប្លុកដោយផ្អែកលើស្លាកត្រូវបានគេហៅផងដែរថាស្រទាប់ដោយស្រទាប់ហើយប្លុកខ្លួនឯងត្រូវបានគេហៅថាស្រទាប់។ នេះគឺដោយសារតែនៅពេលដែលតម្លៃលក្ខណៈសម្បត្តិជាក់លាក់ត្រូវបានប្រើប្រាស់ ពួកវាអាចត្រូវបានជង់ពីលើគ្នា ស្រដៀងទៅនឹងស្រទាប់នៅក្នុង Photoshop ។

ជំនួយក្នុងការកំណត់ទីតាំង

នៅក្នុងប្លង់ប្លុក វាជាការល្អប្រសើរជាងមុនដើម្បីដាក់ស្រទាប់ដោយប្រើសន្លឹករចនាប័ទ្មល្បាក់។ លក្ខណៈ CSS សំខាន់ដែលទទួលខុសត្រូវចំពោះប្លង់គឺអណ្តែត។
វាក្យសម្ព័ន្ធអចលនទ្រព្យ៖
អណ្តែត៖ ឆ្វេង | ត្រូវ | គ្មាន | មរតក
កន្លែងណា៖

ឆ្វេង - តម្រឹមធាតុទៅគែមខាងឆ្វេងនៃអេក្រង់។ លំហូរជុំវិញធាតុដែលនៅសល់កើតឡើងនៅខាងស្តាំ;
ស្តាំ - តម្រឹមនៅខាងស្តាំហូរជុំវិញធាតុផ្សេងទៀត - នៅខាងឆ្វេង;
គ្មាន - ការរុំមិនត្រូវបានអនុញ្ញាត;
មរតក - មរតកតម្លៃ ធាតុមេ.

សូមក្រឡេកមើលឧទាហរណ៍ស្រាលនៃការកំណត់ទីតាំង divs ដោយប្រើលក្ខណៈសម្បត្តិនេះ៖

#left ( width: 200px; height: 100px; float: left; background: rgb(255,51,102); ) #right ( width: 200px; height: 100px; float: right; background: rgb(0,255,153);) ប្លុកខាងឆ្វេង ប្លុកខាងស្តាំ

ឥឡូវនេះយើងនឹងព្យាយាមប្រើលក្ខណៈសម្បត្តិដូចគ្នាដើម្បីដាក់ div ទីបីនៅកណ្តាលទំព័រ។ ប៉ុន្តែជាអកុសលអណ្តែតមិនមានតម្លៃកណ្តាលទេ។ ហើយនៅពេលដែលអ្នកផ្តល់ឱ្យប្លុកថ្មីនូវតម្លៃតម្រឹមទៅខាងស្តាំ ឬខាងឆ្វេង វាត្រូវបានផ្លាស់ប្តូរក្នុងទិសដៅដែលបានបញ្ជាក់។ ដូច្នេះហើយ អ្វីដែលនៅសល់គឺត្រូវកំណត់អណ្តែត៖ ទុកចោលទាំងបីប្លុក៖

ប៉ុន្តែនេះមិនមែនទេ។ ជម្រើសដ៏ល្អបំផុត. នៅពេលដែលបង្អួចត្រូវបានកាត់បន្ថយទំហំ ស្រទាប់ទាំងអស់ត្រូវបានតម្រង់ជួរក្នុងជួរមួយបញ្ឈរ ហើយនៅពេលដែលទំហំត្រូវបានកើនឡើង ពួកវានៅជាប់នឹងគែមខាងឆ្វេងនៃបង្អួច។ ដូច្នេះយើងត្រូវការវិធីល្អប្រសើរជាងនេះដើម្បីដាក់ចំណុចកណ្តាល div ។

ស្រទាប់កណ្តាល

ក្នុងឧទាហរណ៍បន្ទាប់យើងនឹងប្រើស្រទាប់កុងតឺន័រដែលយើងនឹងដាក់ធាតុដែលនៅសល់។ វាដោះស្រាយបញ្ហានៃប្លុកផ្លាស់ទីទាក់ទងគ្នាទៅវិញទៅមកនៅពេលដែលទំហំបង្អួចត្រូវបានផ្លាស់ប្តូរ។ ការដាក់កុងតឺន័រនៅកណ្តាលត្រូវបានធ្វើដោយការកំណត់លក្ខណៈសម្បត្តិរឹមទៅសូន្យសម្រាប់រឹមពីគែមខាងលើ ហើយស្វ័យប្រវត្តិនៅសងខាង (រឹម៖ 0 ស្វ័យប្រវត្តិ)៖

#container ( width: 600px; margin: 0 auto; ) #left ( width: 200px; height: 100px; float: left; background: rgb(255,51,102); ) #right ( width: 200px; height: 100px; float : ឆ្វេង; ផ្ទៃខាងក្រោយ៖ rgb(0,255,153); #center (ទទឹង: 200px; កម្ពស់: 100px; float: left; background: rgb(255,0,0);) ប្លុកខាងឆ្វេង ប្លុកកណ្តាល ប្លុកខាងស្តាំ

ឧទាហរណ៍ដូចគ្នានេះបង្ហាញពីរបៀបដែលអ្នកអាចដាក់កណ្តាល div ផ្ដេក។ ហើយប្រសិនបើអ្នកកែសម្រួលកូដខាងលើបន្តិច អ្នកអាចសម្រេចបាននូវការតម្រឹមបញ្ឈរនៃប្លុក។ ដើម្បីធ្វើដូចនេះអ្នកគ្រាន់តែត្រូវការផ្លាស់ប្តូរប្រវែងនៃស្រទាប់ធុង (កាត់បន្ថយវា) ។ នោះគឺបន្ទាប់ពីកែសម្រួលថ្នាក់ css របស់វាគួរតែមើលទៅដូចនេះ:

បន្ទាប់ពីការផ្លាស់ប្តូរប្លុកទាំងអស់នឹងតម្រង់ជួរយ៉ាងតឹងរ៉ឹងក្នុងជួរដេកមួយនៅកណ្តាល។ ហើយទីតាំងរបស់ពួកគេនឹងមិនផ្លាស់ប្តូរដោយមិនគិតពីទំហំបង្អួចកម្មវិធីរុករកទេ។ នេះជាអ្វីដែលដាក់កណ្តាល div មើលទៅដូច

ក្នុងឧទាហរណ៍ខាងក្រោម យើងបានប្រើលក្ខណៈសម្បត្តិ css ថ្មីមួយចំនួនដើម្បីដាក់ស្រទាប់កណ្តាលនៅក្នុងកុងតឺន័រមួយ៖

#container (ទទឹង៖ 450px; height:150px; margin:0 auto; background-color:#66CCFF;) #left ( width: 100px; height: 100px; background: rgb(255,51,102); display: inline-block; តម្រឹមបញ្ឈរ៖ កណ្ដាល; រឹមឆ្វេង៖ ៣៥ភីច) #ស្ដាំ (ទទឹង៖ ១០០ភីច; កម្ពស់៖ ១០០ភីច; ផ្ទៃខាងក្រោយ៖ rgb(0,255,153); បង្ហាញ៖ ប្លុកក្នុងជួរ; តម្រឹមបញ្ឈរ៖ កណ្ដាល; រឹមឆ្វេង៖ ៣៥ភីច; ) #center (ទទឹង៖ 100px; កម្ពស់៖ 100px; ផ្ទៃខាងក្រោយ៖ rgb(255,0,0); បង្ហាញ៖ ប្លុកក្នុងជួរ; តម្រឹមបញ្ឈរ៖ កណ្តាល; រឹម-ឆ្វេង៖ ៣៥px; )

ការពិពណ៌នាសង្ខេបនៃលក្ខណៈសម្បត្តិ css និងតម្លៃរបស់វាដែលយើងបានប្រើនៅក្នុង ក្នុងឧទាហរណ៍នេះ។ដើម្បីដាក់កណ្តាល div នៅខាងក្នុង div មួយ:

display: inline-block – តម្រឹមធាតុប្លុកចូលទៅក្នុងបន្ទាត់មួយ ហើយធានាថាវារុំជុំវិញធាតុផ្សេងទៀត;
vertical-align: កណ្តាល - តម្រឹមធាតុនៅកណ្តាលទាក់ទងទៅនឹងមេ;
រឹមឆ្វេង - កំណត់រឹមខាងឆ្វេង។

របៀបបង្កើតតំណភ្ជាប់ពីស្រទាប់

ចម្លែកដូចដែលវាអាចស្តាប់ទៅ វាអាចទៅរួច។ ពេលខ្លះប្លុក div ជាតំណភ្ជាប់អាចត្រូវការជាចាំបាច់កំឡុងពេលប្លង់ ប្រភេទផ្សេងៗម៉ឺនុយ។ ចូរយើងពិចារណា ឧទាហរណ៍ជាក់ស្តែងការអនុវត្តស្រទាប់តំណ៖

#layer1( width: 500px; height: 100px; background: rgb(51,255,204); border:groove;) a ( display: block; text-align: center; height: 100%; color: rgb(255,0,51) ;) តំណភ្ជាប់ទៅកាន់គេហទំព័ររបស់យើង។

ក្នុងឧទាហរណ៍នេះ ដោយប្រើបន្ទាត់បង្ហាញ៖ ប្លុក យើងកំណត់តំណទៅតម្លៃនៃធាតុប្លុក។ ហើយដូច្នេះកម្ពស់ទាំងមូល ប្លុក divក្លាយជាតំណ កំណត់កម្ពស់៖ 100% ។

លាក់ និងបង្ហាញធាតុប្លុក

ធាតុប្លុកផ្តល់ឱកាសកាន់តែច្រើនដើម្បីពង្រីកមុខងារនៃចំណុចប្រទាក់ជាងប្លង់តារាងដែលហួសសម័យ។ វាជារឿយៗកើតឡើងដែលការរចនាគេហទំព័រមានលក្ខណៈប្លែក និងអាចស្គាល់បាន។ ប៉ុន្តែសម្រាប់ការផ្តាច់មុខបែបនេះ អ្នកត្រូវតែបង់ប្រាក់ដោយខ្វះទំហំទំនេរ។

នេះជាការពិតជាពិសេស ទំព័រដើមតម្លៃនៃការផ្សាយពាណិជ្ជកម្មដែលខ្ពស់បំផុត។ ដូច្នេះបញ្ហាកើតឡើងពីកន្លែងដែលត្រូវ "រុញ" មួយទៀត បដាផ្សាយពាណិជ្ជកម្ម. ហើយនៅទីនេះអ្នកមិនអាចទៅឆ្ងាយជាមួយនឹងការតម្រឹម div ទៅកណ្តាលនៃទំព័រ!

ដំណោះស្រាយសមហេតុសមផលជាងគឺធ្វើឱ្យប្លុកមួយចំនួនលាក់។ នេះគឺជាឧទាហរណ៍សាមញ្ញនៃការអនុវត្តបែបនេះ៖

#layer1( display:block; width:500px; height:100px; background: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") (layer1="block"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1)

នេះគឺជាប៊ូតុងវេទមន្ត។ ការចុចលើវានឹងលាក់ ឬបង្ហាញប្លុកលាក់។

ក្នុងឧទាហរណ៍នេះ ទីតាំងនៃប្លុក div មិនផ្លាស់ប្តូរតាមមធ្យោបាយណាមួយឡើយ។ វាប្រើមុខងារ JavaScript សាមញ្ញដែលផ្លាស់ប្តូរតម្លៃនៃលក្ខណៈសម្បត្តិបង្ហាញ css បន្ទាប់ពីប៊ូតុងមួយត្រូវបានចុច (ព្រឹត្តិការណ៍ onclick) ។

ដូចដែលអ្នកអាចមើលឃើញ ទ្រព្យសម្បត្តិនេះអាចទទួលយកបាននូវតម្លៃជាច្រើន។ ដូច្នេះវាមានប្រយោជន៍ខ្លាំងណាស់ ហើយអាចប្រើដើម្បីដាក់ទីតាំងធាតុ។ ក្នុងឧទាហរណ៍មួយក្នុងចំណោមឧទាហរណ៍មុន យើងបានប្រើតម្លៃមួយរបស់វា (inline-block) ដើម្បីដាក់កណ្តាល div ក្នុង div ។

ដើម្បីលាក់ និងបង្ហាញស្រទាប់ យើងបានប្រើតម្លៃពីរសម្រាប់លក្ខណៈសម្បត្តិបង្ហាញ។

ថ្ងៃល្អ អតិថិជន និងអ្នកអាននៃការបោះពុម្ពផ្សាយនេះ។ ថ្ងៃនេះខ្ញុំចង់និយាយលម្អិត និងប្រាប់អ្នកពីរបៀបដាក់កណ្តាលអត្ថបទក្នុង CSS ។ នៅក្នុងអត្ថបទមុនមួយចំនួន ខ្ញុំបានប៉ះពាល់ដោយប្រយោល។ ប្រធានបទនេះ។ដូច្នេះ អ្នកមានចំណេះដឹងខ្លះក្នុងផ្នែកនេះ។

ទោះយ៉ាងណាក៏ដោយនៅក្នុងការបោះពុម្ពនេះខ្ញុំនឹងប្រាប់អ្នកអំពី តាមគ្រប់មធ្យោបាយដែលអាចធ្វើទៅបានការតម្រឹមវត្ថុ និងពន្យល់ពីរបៀបចូលបន្ទាត់ និងបន្ទាត់ក្រហមក្នុងកថាខណ្ឌ។ ដូច្នេះចាប់ផ្តើមរៀនសម្ភារៈ!

Html និងកូនចៅរបស់វា ហើយតម្រឹម

វិធីសាស្រ្តនេះស្ទើរតែមិនដែលប្រើទេ ព្រោះវាត្រូវបានជំនួសដោយឧបករណ៍សន្លឹករចនាប័ទ្មល្បាក់។ ទោះជាយ៉ាងណាក៏ដោយ ការដឹងថាមានស្លាកបែបនេះនឹងមិនធ្វើឱ្យអ្នកឈឺចាប់ឡើយ។

ទាក់ទងនឹងការបញ្ជាក់ ( ពាក្យនេះ។ត្រូវបានពិពណ៌នាលម្អិតនៅក្នុងអត្ថបទ "") បន្ទាប់មកការបញ្ជាក់ html ខ្លួនឯងថ្កោលទោសការប្រើប្រាស់< center>ចាប់តាំងពីសម្រាប់សុពលភាព វាចាំបាច់ក្នុងការប្រើ DOCTYPE អន្តរកាល> ។

ប្រភេទនេះអនុញ្ញាតឱ្យធាតុហាមឃាត់ឆ្លងកាត់។

មជ្ឈមណ្ឌល

ខ្លឹមសារនេះនឹងត្រូវចំកណ្តាល។

សូមចំណាំថាសម្រាប់រូបភាពគុណលក្ខណៈដែលយើងកំពុងវិភាគមានអត្ថន័យខុសគ្នាបន្តិច។

ក្នុងឧទាហរណ៍ខ្ញុំបានប្រើ align="middle" ។ សូមអរគុណចំពោះបញ្ហានេះ រូបភាពត្រូវបានតម្រឹម ដូច្នេះប្រយោគមានទីតាំងនៅកណ្តាលរូបភាព។

ឧបករណ៍ដាក់កណ្តាលនៅក្នុង css

លក្ខណៈសម្បត្តិ CSS បានរចនាឡើងសម្រាប់ការតម្រឹមប្លុក អត្ថបទ និង មាតិកាក្រាហ្វិកត្រូវបានគេប្រើញឹកញាប់ជាង។ នេះជាចម្បងដោយសារតែភាពងាយស្រួល និងភាពបត់បែននៃការអនុវត្តរចនាប័ទ្ម។

ដូច្នេះ ចូរចាប់ផ្តើមជាមួយនឹងលក្ខណៈសម្បត្តិដាក់កណ្តាលអត្ថបទដំបូង - តម្រឹមអត្ថបទ។

វាដំណើរការតាមរបៀបដូចគ្នានឹងការតម្រឹមក្នុង . ក្នុងចំណោមពាក្យគន្លឹះ អ្នកអាចជ្រើសរើសមួយពីបញ្ជីទូទៅ ឬទទួលមរតកលក្ខណៈរបស់បុព្វបុរស (ទទួលមរតក)។

ខ្ញុំចង់កត់សម្គាល់ថានៅក្នុង css3 អ្នកអាចកំណត់ប៉ារ៉ាម៉ែត្រ 2 បន្ថែមទៀត: ចាប់ផ្តើម - អាស្រ័យលើច្បាប់នៃការសរសេរអត្ថបទ (ពីស្តាំទៅឆ្វេងឬផ្ទុយមកវិញ) កំណត់ការតម្រឹមទៅឆ្វេងឬស្តាំ (ស្រដៀងនឹងការងារឆ្វេងឬស្តាំ) និងបញ្ចប់ - ផ្ទុយពីការចាប់ផ្តើម (នៅពេលសរសេរអត្ថបទពីឆ្វេងទៅស្តាំ វាដំណើរការដូចខាងស្ដាំ នៅពេលសរសេរពីស្តាំទៅឆ្វេង - ឆ្វេង)។

text-align div ( border: 5px double red; padding: 0 22px 0 22px; ) #l ( text-align: right; ) #s ( text-align: end; )

ប្រយោគនៅខាងស្តាំ

ប្រយោគដោយប្រើចុងបញ្ចប់

ខ្ញុំនឹងប្រាប់អ្នកអំពីល្បិចតូចមួយ។ នៅពេលអ្នកជ្រើសរើសត្រឹមត្រូវ។ បន្ទាត់ចុងក្រោយអាចធ្លាក់ចុះមិនច្បាស់ពីខាងក្រោម។ ឧទាហរណ៍ ដើម្បីដាក់ទីតាំងវានៅកណ្តាល អ្នកអាចប្រើលក្ខណសម្បត្តិអត្ថបទ-តម្រឹម-ចុងក្រោយ។

ដើម្បីតម្រឹមមាតិកាគេហទំព័រ ឬក្រឡាតារាងបញ្ឈរ សូមប្រើលក្ខណសម្បត្តិតម្រឹមបញ្ឈរ។ ខាងក្រោមនេះខ្ញុំបានពិពណ៌នាអំពីពាក្យគន្លឹះសំខាន់ៗនៃធាតុ។

ពាក្យគន្លឹះ	គោលបំណង
បន្ទាត់មូលដ្ឋាន	បញ្ជាក់ការតម្រឹមទៅនឹងបន្ទាត់បុព្វបុរស ដែលហៅថាបន្ទាត់គោល។ ប្រសិនបើវត្ថុបុព្វបុរសមិនមានបន្ទាត់បែបនេះទេ ការតម្រឹមកើតឡើងនៅតាមបណ្តោយព្រំដែនខាងក្រោម។
កណ្តាល	ពាក់កណ្តាលនៃវត្ថុដែលបានផ្លាស់ប្តូរត្រូវបានតម្រឹមទៅបន្ទាត់មូលដ្ឋាន ដែលជាន់កម្ពស់នៃធាតុមេត្រូវបានបន្ថែម។
បាត	ផ្នែកខាងក្រោមនៃមាតិកាដែលបានជ្រើសរើសលៃតម្រូវទៅផ្នែកខាងក្រោមនៃវត្ថុនៅខាងក្រោមវា។
កំពូល	ស្រដៀងទៅនឹងបាត ប៉ុន្តែជាមួយនឹងផ្នែកខាងលើនៃវត្ថុ។
អស្ចារ្យ	ធ្វើអក្សរលើតួអក្សរ។
រង	ធ្វើឱ្យធាតុរង។

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

FLOWER តម្រឹមបញ្ឈរ

vertical-align div(font-size: 4em; text-align:center; text-decoration: underline;) #A(vertical-align: top;) #B(vertical-align: middle;) #C(បញ្ឈរ-តម្រឹម : super;) #D(បញ្ឈរ-តម្រឹម៖ រង;) ផ្កា

ការចូលបន្ទាត់

ហើយទីបំផុតយើងមកដល់ការចូលបន្ទាត់កថាខណ្ឌ។ IN ភាសា cssលក្ខណសម្បត្តិពិសេសដែលហៅថា text-indent ត្រូវបានប្រើ។

ដោយមានជំនួយរបស់វាអ្នកអាចបង្កើតទាំងបន្ទាត់ក្រហមនិង protrusion (អ្នកត្រូវបញ្ជាក់តម្លៃអវិជ្ជមាន) ។

text-indent #a ( text-indent: 53px; ) #b ( text-indent: -43px; ) div ( background: #FFDAB9; width:35%; font-size:29px; margin-left: 30%; padding - ឆ្វេង៖ ៥០ ភីច;

ដើម្បីបង្កើតបន្ទាត់ក្រហម អ្នកគ្រាន់តែត្រូវដឹងពីប៉ារ៉ាម៉ែត្រមួយប៉ុណ្ណោះ។

នេះជាលក្ខណៈសម្បត្តិចូលបន្ទាត់អត្ថបទសាមញ្ញ។

ខ្ញុំសរសើរអ្នកដែលបានសាកល្បងគំរូនីមួយៗក្នុងការអនុវត្ត។ ផ្ញើតំណភ្ជាប់ទៅកាន់ប្លុករបស់ខ្ញុំទៅមិត្តរបស់អ្នក ហើយកុំភ្លេចជាវ។ សូមសំណាងល្អ! លាហើយ!

ដោយក្តីគោរព Roman Chueshov

អាន៖ ៦៧៥ ដង

ជាញឹកញាប់ណាស់នៅក្នុងប្លង់ ចាំបាច់ត្រូវដាក់កណ្តាលធាតុមួយចំនួនផ្ដេក និង/ឬបញ្ឈរ។ ដូច្នេះហើយ ខ្ញុំបានសម្រេចចិត្តបង្កើតអត្ថបទជាមួយ នៅក្នុងវិធីផ្សេងៗផ្តោតលើចំណុចកណ្តាល ដូច្នេះអ្វីៗទាំងអស់គឺនៅនឹងកន្លែងតែមួយ។

រឹមតម្រឹមផ្ដេក៖ ស្វ័យប្រវត្តិ

ការតម្រឹមផ្តេកនៅពេល រឹមជំនួយប្រើនៅពេលទទឹងនៃធាតុកណ្តាលត្រូវបានដឹង។ ធ្វើការសម្រាប់ធាតុប្លុក៖

អេឡឹម (រឹម-ឆ្វេង៖ ស្វ័យប្រវត្តិ; រឹម-ស្ដាំ៖ ស្វ័យប្រវត្តិ; ទទឹង៖ ៥០%;)

ការបញ្ជាក់ដោយស្វ័យប្រវត្តិសម្រាប់រឹមខាងស្តាំ និងខាងឆ្វេងធ្វើឱ្យពួកវាស្មើគ្នា ដែលដាក់កណ្តាលធាតុផ្ដេកនៅក្នុងប្លុកមេ។

តម្រឹមអត្ថបទ៖ កណ្តាល

វិធីសាស្រ្តនេះគឺសមរម្យសម្រាប់ការដាក់កណ្តាលអត្ថបទនៅក្នុងប្លុកមួយ។ តម្រឹមអត្ថបទ៖ កណ្តាល៖

តម្រឹមជាមួយអត្ថបទតម្រឹម .wrapper ( តម្រឹមអត្ថបទ៖ កណ្តាល; )

ខ្ញុំតម្រឹមកណ្តាល

ទីតាំង និងរឹមអវិជ្ជមានខាងឆ្វេង

ស័ក្តិសមសម្រាប់ដាក់កណ្តាលប្លុកនៃទទឹងដែលគេស្គាល់។ យើងផ្តល់ទីតាំងប្លុកមេ៖ ទាក់ទងទៅនឹងទីតាំងដែលទាក់ទងនឹងវា ទីតាំងធាតុកណ្តាល៖ ដាច់ខាត , ឆ្វេង៖ 50% និងរឹមអវិជ្ជមាន - ឆ្វេង ដែលតម្លៃស្មើនឹងពាក់កណ្តាលទទឹងនៃធាតុ៖

ការតម្រឹមដោយប្រើទីតាំង .wrapper (ទីតាំង៖ ទាក់ទង; ) .wrapper p (ឆ្វេង៖ 50%; រឹម៖ 0 0 0 -100px; ទីតាំង៖ absolute; width: 200px;)

ខ្ញុំតម្រឹមកណ្តាល

បង្ហាញ៖ inline-block + text-align: center

វិធីសាស្រ្តនេះគឺសមរម្យសម្រាប់ការតម្រឹមប្លុកនៃទទឹងមិនស្គាល់ ប៉ុន្តែត្រូវការមេរុំ។ ឧទាហរណ៍ អ្នកអាចដាក់កណ្តាលម៉ឺនុយផ្ដេកតាមវិធីនេះ៖

ការតម្រឹមជាមួយការបង្ហាញ៖ ប្លុកក្នុងបន្ទាត់ + តម្រឹមអត្ថបទ៖ កណ្តាល;

អំពីអ្នកនិពន្ធ

ការតម្រឹមបន្ទាត់បញ្ឈរ - កម្ពស់ ដើម្បីតម្រឹមមួយបន្ទាត់នៃអត្ថបទអ្នកអាចប្រើតម្លៃដូចគ្នា។ កម្ពស់ និងគម្លាតបន្ទាត់

សម្រាប់ប្លុកមេ។ សាកសមសម្រាប់ប៊ូតុង ធាតុម៉ឺនុយ។ល។

line-height .wrapper (កម្ពស់៖ 100px; line-height: 100px;)

ខ្ញុំត្រូវបានតម្រឹមបញ្ឈរ

ទីតាំងនិងរឹមអវិជ្ជមានឡើង

ធាតុមួយអាចត្រូវបានតម្រឹមបញ្ឈរដោយផ្ដល់ឱ្យវានូវកម្ពស់ថេរ និងទីតាំងអនុវត្ត៖ ដាច់ខាត និងរឹមអវិជ្ជមានឡើងទៅស្មើនឹងកម្ពស់ពាក់កណ្ដាលនៃធាតុដែលត្រូវបានតម្រឹម។ ប្លុកមេត្រូវតែផ្តល់ទីតាំង៖ ទាក់ទង៖

Wrapper (ទីតាំង៖ ទាក់ទង; ) elem (កម្ពស់៖ 200px; រឹម៖ -100px 0 0; position: absolute; top: 50%;)

វិធីនេះ ដោយប្រើការកំណត់ទីតាំង និងរឹមអវិជ្ជមាន អ្នកអាចដាក់កណ្តាលធាតុនៅលើទំព័រ។

សម្រាប់ការតម្រឹមបញ្ឈរ ការបង្ហាញ៖ លក្ខណសម្បត្តិក្រឡាតារាងត្រូវបានអនុវត្តចំពោះធាតុ ដែលបង្ខំឱ្យវាត្រាប់តាមក្រឡាតារាង។ យើងក៏កំណត់កម្ពស់របស់វា និងតម្រឹមបញ្ឈរ៖ កណ្តាល។ ចូរយើងរុំទាំងអស់នេះនៅក្នុងធុងមួយដែលមាន dislpay: ទ្រព្យសម្បត្តិ; :

បញ្ឈរ ការបង្ហាញតម្រឹម: table-cell .wrapper ( display: table; width: 100%; ) .cell ( display: table-cell; height: 100px; vertical-align: middle; )

line-height .wrapper (កម្ពស់៖ 100px; line-height: 100px;)

ការតម្រឹមថាមវន្តនៃធាតុនៅលើទំព័រមួយ។

យើងបានពិនិត្យមើលវិធីដើម្បីតម្រឹមធាតុនៅលើទំព័រមួយនៅពេល CSS ជំនួយ. ឥឡូវនេះសូមក្រឡេកមើលការអនុវត្ត jQuery ។

តោះភ្ជាប់ jQuery ទៅទំព័រ៖

ខ្ញុំស្នើឱ្យសរសេរ មុខងារសាមញ្ញដាក់កណ្តាលធាតុនៅលើទំព័រ ចូរហៅវាថា alignCenter() ។ ធាតុខ្លួនវាដើរតួជាអាគុយម៉ង់ទៅនឹងមុខងារ៖

មុខងារតម្រឹមមជ្ឈមណ្ឌល (អេឡឹម) ( // លេខកូដនៅទីនេះ)

នៅក្នុងតួនៃអនុគមន៍ យើងគណនាថាមវន្ត និងកំណត់កូអរដោនេនៃទំព័រកណ្តាលទៅលក្ខណៈសម្បត្តិ CSS ខាងឆ្វេង និងកំពូល៖

មុខងារ alignCenter(elem) ( elem.css(( left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem. height()) / 2 + "px" // កុំភ្លេចបន្ថែមទីតាំង៖ ដាច់ខាតទៅធាតុដើម្បីកេះកូអរដោណេ )))

នៅក្នុងជួរដំបូងនៃមុខងារយើងទទួលបានទទឹងនៃឯកសារហើយដកពីវាទទឹងនៃធាតុដោយបែងចែកពាក់កណ្តាល - នេះនឹងជាកណ្តាលផ្តេកនៃទំព័រ។ បន្ទាត់ទីពីរធ្វើដូចគ្នា មានតែកម្ពស់សម្រាប់ការតម្រឹមបញ្ឈរប៉ុណ្ណោះ។

មុខងារនេះគឺរួចរាល់ហើយ អ្វីដែលនៅសេសសល់គឺត្រូវភ្ជាប់វាទៅនឹងការត្រៀម DOM និងព្រឹត្តិការណ៍ផ្លាស់ប្តូរទំហំបង្អួច៖

$(function() ( // ហៅមុខងារកណ្តាលនៅពេល DOM រួចរាល់ alignCenter($(elem)); // ហៅមុខងារនៅពេលប្តូរទំហំបង្អួច $(window)។resize(function() ( alignCenter($(elem) ). px", កំពូល៖ ($(window).height() - elem.height()) / 2 + "px" ))))))

ការអនុវត្ត Flexbox

លក្ខណៈពិសេស CSS3 ថ្មីដូចជា Flexbox កំពុងក្លាយជារឿងធម្មតាបន្តិចម្តងៗ។ បច្ចេកវិទ្យាជួយបង្កើតការសម្គាល់ដោយមិនប្រើអណ្តែត ទីតាំងជាដើម។ វាក៏អាចប្រើដើម្បីដាក់ចំណុចកណ្តាលផងដែរ។ ឧទាហរណ៍ អនុវត្ត Flexbox ទៅ parent element.wrapper ហើយដាក់កណ្តាលមាតិកាខាងក្នុង៖

Wrapper ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 500px; width: 500px;) .wrapper .content (រឹម៖ ស្វ័យប្រវត្តិ; /* រឹម៖ 0 auto;

ច្បាប់នេះដាក់កណ្តាលធាតុផ្ដេក និងបញ្ឈរក្នុងពេលតែមួយ - រឹមឥឡូវដំណើរការមិនត្រឹមតែសម្រាប់ការតម្រឹមផ្តេកប៉ុណ្ណោះទេ ប៉ុន្តែវាក៏សម្រាប់បញ្ឈរផងដែរ។ ហើយដោយគ្មានទទឹង/កម្ពស់ដែលគេស្គាល់។

ធនធានដែលពាក់ព័ន្ធ ជួយគម្រោង

ខ្ញុំគិតថាអ្នកជាច្រើនដែលត្រូវតែដោះស្រាយជាមួយប្លង់បានជួបប្រទះតម្រូវការដើម្បីតម្រឹមធាតុបញ្ឈរ និងដឹងពីការលំបាកដែលកើតឡើងនៅពេលតម្រឹមធាតុមួយទៅកណ្តាល។

បាទ/ចាស សម្រាប់ការតម្រឹមបញ្ឈរ មានលក្ខណសម្បត្តិតម្រឹមបញ្ឈរពិសេសក្នុង CSS ដែលមានតម្លៃច្រើន។ ទោះយ៉ាងណាក៏ដោយ នៅក្នុងការអនុវត្ត វាមិនដំណើរការដូចការរំពឹងទុកនោះទេ។ តោះព្យាយាមដោះស្រាយរឿងនេះ។

ចូរយើងប្រៀបធៀបវិធីសាស្រ្តខាងក្រោម។ តម្រឹមដោយប្រើ៖

តុ
ការចូលបន្ទាត់,
កម្ពស់បន្ទាត់
លាតសន្ធឹង,
រឹមអវិជ្ជមាន,
បំប្លែង
ធាតុ pseudo
ប្រអប់ flexbox ។

ដើម្បីជាឧទាហរណ៍ សូមពិចារណាឧទាហរណ៍ខាងក្រោម។

មានពីរ ធាតុ divដោយមានមួយក្នុងចំនោមពួកវាស្ថិតនៅខាងក្នុងមួយទៀត។ ចូរផ្តល់ឱ្យពួកគេនូវថ្នាក់ដែលត្រូវគ្នា - ខាងក្រៅនិងខាងក្នុង។

បញ្ហាប្រឈមគឺត្រូវតម្រឹមធាតុខាងក្នុងជាមួយនឹងចំណុចកណ្តាលនៃធាតុខាងក្រៅ។

ដំបូងយើងពិចារណាករណីនៅពេលដែលវិមាត្រនៃប្លុកខាងក្រៅនិងខាងក្នុងត្រូវបានគេស្គាល់។ ចូរបន្ថែមការបង្ហាញច្បាប់៖ ប្លុកក្នុងបន្ទាត់ទៅធាតុខាងក្នុង ហើយតម្រឹមអត្ថបទ៖ កណ្ដាល និងតម្រឹមបញ្ឈរ៖ កណ្ដាលទៅធាតុខាងក្រៅ។

សូមចងចាំថាការតម្រឹមអនុវត្តចំពោះតែធាតុដែលមានរបៀបបង្ហាញក្នុងជួរ ឬប្លុកក្នុងជួរប៉ុណ្ណោះ។

ចូរកំណត់ទំហំនៃប្លុក ក៏ដូចជាពណ៌ផ្ទៃខាងក្រោយ ដើម្បីយើងអាចមើលឃើញស៊ុមរបស់វា។

ខាងក្រៅ (ទទឹង: 200px; កម្ពស់: 200px; តម្រឹមអត្ថបទ៖ កណ្តាល; តម្រឹមបញ្ឈរ៖ កណ្តាល; ពណ៌ផ្ទៃខាងក្រោយ៖ #ffc; ) .ខាងក្នុង (បង្ហាញ៖ ក្នុងបន្ទាត់-ប្លុក; ទទឹង៖ 100px; កម្ពស់៖ 100px; ពណ៌ផ្ទៃខាងក្រោយ : #fcc)
បន្ទាប់ពីអនុវត្តរចនាប័ទ្ម យើងនឹងឃើញថាប្លុកខាងក្នុងត្រូវបានតម្រឹមផ្ដេក ប៉ុន្តែមិនមែនបញ្ឈរទេ៖
http://jsfiddle.net/c1bgfffq/

ហេតុអ្វីបានជារឿងនេះកើតឡើង?ចំនុចនោះគឺថាលក្ខណសម្បត្តិតម្រឹមបញ្ឈរប៉ះពាល់ដល់ការតម្រឹមនៃធាតុខ្លួនវា មិនមែនមាតិការបស់វាទេ (លើកលែងតែនៅពេលដែលវាត្រូវបានអនុវត្តទៅក្រឡាតារាង)។ ដូច្នេះកម្មវិធី នៃទ្រព្យសម្បត្តិនេះ។ទៅ ធាតុខាងក្រៅមិនបានផ្តល់ឱ្យអ្វីទាំងអស់។ ជាងនេះទៅទៀត ការអនុវត្តទ្រព្យសម្បត្តិនេះទៅធាតុខាងក្នុងក៏នឹងមិនធ្វើអ្វីដែរ ព្រោះប្លុកក្នុងជួរត្រូវបានតម្រឹមបញ្ឈរទាក់ទងទៅនឹងប្លុកដែលនៅជាប់គ្នា ហើយក្នុងករណីរបស់យើង យើងមានប្លុកខាងក្នុងមួយ។

មានបច្ចេកទេសជាច្រើនដើម្បីដោះស្រាយបញ្ហានេះ។ ខាងក្រោមនេះយើងនឹងពិនិត្យឱ្យកាន់តែច្បាស់អំពីពួកវានីមួយៗ ។

ការតម្រឹមដោយប្រើតារាង ដំណោះស្រាយដំបូងដែលគិតគឺត្រូវជំនួសប្លុកខាងក្រៅដោយតារាងនៃក្រឡាមួយ។ ក្នុងករណីនេះ ការតម្រឹមនឹងត្រូវបានអនុវត្តចំពោះមាតិកានៃក្រឡា ពោលគឺទៅប្លុកខាងក្នុង។

http://jsfiddle.net/c1bgfffq/1/

ដកជាក់ស្តែង ការសម្រេចចិត្តនេះ។- តាមទស្សនៈនៃន័យធៀប វាមិនត្រឹមត្រូវទេក្នុងការប្រើតារាងសម្រាប់ការតម្រឹម។ គុណវិបត្តិទីពីរគឺថាដើម្បីបង្កើតតារាងអ្នកត្រូវបន្ថែមធាតុផ្សេងទៀតនៅជុំវិញ ឯកតាខាងក្រៅ.

ដកទីមួយអាចត្រូវបានយកចេញដោយផ្នែកដោយជំនួសតារាង និងស្លាក td ដោយ div និងកំណត់របៀបបង្ហាញតារាងក្នុង CSS ។

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
ទោះជាយ៉ាងណាក៏ដោយ ប្លុកខាងក្រៅនឹងនៅតែជាតារាងមួយដែលមានផលវិបាកជាបន្តបន្ទាប់ទាំងអស់។

ការតម្រឹមដោយប្រើការចូលបន្ទាត់ ប្រសិនបើកម្ពស់នៃប្លុកខាងក្នុង និងខាងក្រៅត្រូវបានគេស្គាល់ នោះការតម្រឹមអាចត្រូវបានកំណត់ដោយប្រើការចូលបន្ទាត់បញ្ឈរនៃប្លុកខាងក្នុងដោយប្រើរូបមន្ត៖ (H ខាងក្រៅ - H ខាងក្នុង) / 2 ។

ខាងក្រៅ (កម្ពស់៖ 200px; ) ខាងក្នុង (កម្ពស់៖ 100px; រឹម៖ 50px 0;)
http://jsfiddle.net/c1bgfffq/6/

គុណវិបត្តិនៃដំណោះស្រាយគឺថាវាអាចអនុវត្តបានតែនៅក្នុង ចំនួនមានកំណត់ករណីនៅពេលដែលកម្ពស់នៃប្លុកទាំងពីរត្រូវបានគេស្គាល់។

ការតម្រឹមជាមួយកម្ពស់បន្ទាត់ ប្រសិនបើអ្នកដឹងថាប្លុកខាងក្នុងគួរតែកាន់កាប់មិនលើសពីមួយបន្ទាត់នៃអត្ថបទនោះ អ្នកអាចប្រើលក្ខណសម្បត្តិកម្ពស់បន្ទាត់ ហើយកំណត់វាស្មើនឹងកម្ពស់នៃប្លុកខាងក្រៅ។ ដោយសារខ្លឹមសារនៃប្លុកខាងក្នុងមិនគួររុំទៅជួរទីពីរ វាត្រូវបានផ្ដល់អនុសាសន៍ឱ្យបន្ថែមចន្លោះពណ៌សផងដែរ: nowrap និង overflow: ច្បាប់លាក់។

ខាងក្រៅ (កម្ពស់៖ 200px; កម្ពស់បន្ទាត់៖ 200px; ) ខាងក្នុង (ចន្លោះពណ៌ស៖ nowrap; លើសចំណុះ៖ លាក់;)
http://jsfiddle.net/c1bgfffq/12/

ផងដែរ។ បច្ចេកទេសនេះ។ក៏អាចត្រូវបានប្រើសម្រាប់កម្រិត អត្ថបទពហុជួរប្រសិនបើអ្នកកំណត់តម្លៃបន្ទាត់កម្ពស់ឡើងវិញសម្រាប់ប្លុកខាងក្នុង ហើយបន្ថែមការបង្ហាញផងដែរ៖ inline-block និង vertical-align: middle rules។

ខាងក្រៅ (កម្ពស់៖ 200px; កម្ពស់បន្ទាត់៖ 200px; ) ខាងក្នុង (កម្ពស់បន្ទាត់៖ ធម្មតា; បង្ហាញ៖ ប្លុកក្នុងជួរ; តម្រឹមបញ្ឈរ៖ កណ្ដាល; )
http://jsfiddle.net/c1bgfffq/15/

ដក វិធីសាស្រ្តនេះ។គឺថាកម្ពស់នៃប្លុកខាងក្រៅត្រូវតែដឹង។

ការតម្រឹមដោយប្រើ "ការលាតសន្ធឹង" វិធីសាស្រ្តនេះអាចត្រូវបានប្រើនៅពេលដែលកម្ពស់នៃប្លុកខាងក្រៅមិនស្គាល់ប៉ុន្តែកម្ពស់នៃផ្នែកខាងក្នុងត្រូវបានគេដឹង។

ដើម្បីធ្វើដូចនេះអ្នកត្រូវការ:

កំណត់ទីតាំងដែលទាក់ទងទៅប្លុកខាងក្រៅ និងការកំណត់ទីតាំងដាច់ខាតទៅប្លុកខាងក្នុង។
បន្ថែមច្បាប់ខាងលើ៖ ០ និងខាងក្រោម៖ ០ ទៅប្លុកខាងក្នុង ដែលជាលទ្ធផលដែលវានឹងលាតសន្ធឹងដល់កម្ពស់ទាំងមូលនៃប្លុកខាងក្រៅ។
កំណត់បន្ទះបញ្ឈរនៃប្លុកខាងក្នុងទៅជាស្វ័យប្រវត្តិ។

គំនិតដែលនៅពីក្រោយបច្ចេកទេសនេះគឺថាការកំណត់កម្ពស់សម្រាប់ប្លុកដែលលាតសន្ធឹង និងទីតាំងពិតប្រាកដធ្វើឱ្យកម្មវិធីរុករកតាមអ៊ីនធឺណិតគណនាបន្ទះបញ្ឈរក្នុងសមាមាត្រស្មើគ្នាប្រសិនបើវាត្រូវបានកំណត់ទៅជាស្វ័យប្រវត្តិ។

អ្នកត្រូវផ្តល់ទីតាំងដែលទាក់ទងនៃប្លុកខាងក្រៅ និងការកំណត់ទីតាំងដាច់ខាតនៃប្លុកខាងក្នុង។ បន្ទាប់មកអ្នកត្រូវផ្លាស់ទីប្លុកខាងក្នុងចុះក្រោមដោយពាក់កណ្តាលកម្ពស់នៃកំពូលប្លុកខាងក្រៅ: 50% ហើយលើកវាឡើងពាក់កណ្តាលកម្ពស់របស់វារឹមផ្នែកខាងលើ: -H ខាងក្នុង / 2 ។

ខាងក្រៅ (ទីតាំង៖ ទាក់ទង; ) .ខាងក្នុង (កម្ពស់៖ 100px; ទីតាំង៖ ដាច់ខាត; កំពូល៖ 50%; រឹមកំពូល៖ -50px; )
http://jsfiddle.net/c1bgfffq/13/

គុណវិបត្តិនៃវិធីសាស្រ្តនេះគឺថាកម្ពស់នៃអង្គភាពក្នុងផ្ទះត្រូវតែដឹង។

ខាងក្រៅ (ទីតាំង៖ ទាក់ទង; ) .ខាងក្នុង (ទីតាំង៖ ដាច់ខាត; កំពូល៖ 50%; បំប្លែង៖ បកប្រែY(-៥០%)); )
http://jsfiddle.net/c1bgfffq/9/

ហេតុអ្វីបានជាមិនអាចកំណត់តម្លៃជាភាគរយក្នុងវិធីសាស្ត្រមុន? ដោយសារតម្លៃរឹមភាគរយត្រូវបានគណនាទាក់ទងទៅនឹងធាតុមេ តម្លៃ 50% នឹងមានកម្ពស់ពាក់កណ្តាលនៃប្រអប់ខាងក្រៅ ហើយយើងនឹងត្រូវការលើកប្រអប់ខាងក្នុងដល់កម្ពស់ពាក់កណ្តាលរបស់វា។ ទ្រព្យសម្បត្តិបំប្លែងគឺល្អឥតខ្ចោះសម្រាប់រឿងនេះ។

គុណវិបត្តិនៃវិធីសាស្រ្តនេះគឺថាវាមិនអាចប្រើបានទេប្រសិនបើអង្គភាពក្នុងផ្ទះមានទីតាំងដាច់ខាត។

វិធីទំនើប

ប្លុកខាងក្រៅត្រូវកំណត់ដើម្បីបង្ហាញ៖ flex និងប្លុកខាងក្នុងទៅជារឹម៖ ស្វ័យប្រវត្តិ។ ហើយនោះជាទាំងអស់! ស្អាតមែនអត់?

ខាងក្រៅ (បង្ហាញ៖ flex; ទទឹង៖ 200px; កម្ពស់៖ 200px;) .ខាងក្នុង (ទទឹង៖ 100px; រឹម៖ ស្វ័យប្រវត្តិ; )
http://jsfiddle.net/c1bgfffq/14/

គុណវិបត្តិនៃវិធីសាស្រ្តនេះគឺថា Flexbox ត្រូវបានគាំទ្រដោយកម្មវិធីរុករកទំនើបប៉ុណ្ណោះ។

ដើម្បីតម្រឹមអត្ថបទបញ្ឈរ វាជាការប្រសើរក្នុងការប្រើការចូលបន្ទាត់បញ្ឈរ ឬលក្ខណៈសម្បត្តិកម្ពស់បន្ទាត់។
សម្រាប់ធាតុដែលមានទីតាំងពិតប្រាកដជាមួយនឹងកម្ពស់ដែលគេស្គាល់ (ឧទាហរណ៍ រូបតំណាង) វិធីសាស្ត្រដែលមានលក្ខណៈសម្បត្តិរឹមកំពូលអវិជ្ជមានគឺល្អ។
សម្រាប់ករណីស្មុគ្រស្មាញបន្ថែមទៀត នៅពេលដែលកម្ពស់នៃប្លុកមិនស្គាល់ អ្នកត្រូវប្រើធាតុ pseudo ឬ លក្ខណៈសម្បត្តិបំលែង។
ជាការប្រសើរណាស់, ប្រសិនបើអ្នកមានសំណាងខ្លាំងណាស់ដែលអ្នកមិនចាំបាច់គាំទ្រកំណែចាស់នៃកម្មវិធីរុករក IE នោះជាការពិតណាស់, វាជាការប្រសើរក្នុងការប្រើ Flexbox ។

ស្លាក: បន្ថែមស្លាក