დიაპაზონის ცენტრირება ჰორიზონტალურად და ვერტიკალურად. CSS ცენტრირების DIV ბლოკები: ჰორიზონტალური და ვერტიკალური

02.08.2019

რამდენი ასლი უკვე გატეხილია გვერდზე ელემენტების გასწორების ამოცანის შესახებ. თქვენს ყურადღებას მოვიყვან სტივენ შოუს შესანიშნავი სტატიის თარგმანს ამ პრობლემის გადაწყვეტით Smashing Magazine-ისთვის - Absolute Horizontal And Vertical Centering In CSS.

ჩვენ ყველამ ვიცოდით მარჟის შესახებ: 0 ავტო;

ჰორიზონტალური ცენტრირებისთვის, მაგრამ ზღვარი: ავტო;
ვერტიკალურზე არ მუშაობდა. ამის მარტივად გამოსწორება შესაძლებელია სიმაღლის დაყენებით და შემდეგი სტილის გამოყენებით:

აბსოლუტური ცენტრი ( ზღვარი: ავტო; პოზიცია: აბსოლუტური; ზედა: 0; მარცხნივ: 0; ქვედა: 0; მარჯვნივ: 0; )

მე არ ვარ პირველი, ვინც შემოგვთავაზა ეს გამოსავალი, მაგრამ ეს მიდგომა იშვიათად გამოიყენება ვერტიკალური გასწორებისთვის. სტატიის კომენტარებში როგორ მოვახდინოთ CSS-ით რაიმეს ცენტრირება, საიმონი აკავშირებს jsFiddle-ის მაგალითს, რომელიც შესანიშნავ გადაწყვეტას იძლევა ვერტიკალური ცენტრირებისთვის. აქ არის კიდევ რამდენიმე ამ თემაზე.

მოდით უფრო ახლოს მივხედოთ მეთოდს.
უპირატესობები
ჯვარედინი ბრაუზერის თავსებადობა (IE 8-10-ის ჩათვლით)
დამატებითი მარკირების გარეშე, მინიმალური სტილი
ადაპტაცია

დამოუკიდებლობა ბალიშებისგან (ყუთის ზომის გარეშე!)

მუშაობს სურათებისთვის
ხარვეზები
სიმაღლე უნდა იყოს მითითებული (იხ. ცვლადი სიმაღლე)

მიზანშეწონილია დააყენოთ overflow: auto, რათა შინაარსი არ გავრცელდეს

Windows Phone-ზე არ მუშაობს

ბრაუზერის თავსებადობა მეთოდი გამოცდილია და მშვენივრად მუშაობს Chrome, Firefox, Safari, Mobile Safari და კიდევ IE 8-10-ში. ერთმა მომხმარებელმა აღნიშნა, რომ კონტენტი ვერტიკალურად სწორდება კონტეინერის შიგნით.

აბსოლუტური ცენტრი (სიგანე: 50%; სიმაღლე: 50%; გადინება: ავტო; ზღვარი: ავტო; პოზიცია: აბსოლუტური; ზედა: 0; მარცხნივ: 0; ქვედა: 0; მარჯვნივ: 0; )

ხედვის პორტის გამოყენებით დააყენეთ კონტენტი პოზიციაზე: ფიქსირებული და დააყენეთ z-ინდექსი:

Absolute-Center.is-Responsive (სიგანე: 60%; სიმაღლე: 60%; მინ-სიგანე: 400 პიქსელი; მაქსიმალური სიგანე: 500 პიქსელი; ბალიშები: 40 პიქსელი; გადინება: ავტო; ზღვარი: ავტო; პოზიცია: აბსოლუტური; ზედა: 0; მარცხნივ: 0 ქვევით: 0;

ოფსეტები თუ საიტს აქვს ფიქსირებული სათაური ან გჭირდებათ სხვა ჩაღრმავება, თქვენ უბრალოდ უნდა დაამატოთ კოდი, როგორიცაა top: 70px;

ხოლო ზღვარი დაყენებულია: ავტო;

შინაარსის ბლოკი სწორად იქნება ორიენტირებული სიმაღლეზე.

თქვენ ასევე შეგიძლიათ კონტენტის გასწორება სასურველ მხარეს, დატოვოთ ცენტრის სიმაღლეზე. ამისათვის თქვენ უნდა გამოიყენოთ უფლება: 0; მარცხენა: ავტო;
მარჯვნივ ან მარცხნივ გასწორებისთვის: 0; მარჯვნივ: ავტო;

მარცხნივ გასწორებისთვის.

Absolute-Center.is-Right ( სიგანე: 50%; სიმაღლე: 50%; ზღვარი: ავტომატური; გადინება: ავტო; პოზიცია: აბსოლუტური; ზედა: 0; მარცხნივ: ავტო; ქვედა: 0; მარჯვნივ: 20 პიქსელი; ტექსტის გასწორება: უფლება;

ბევრი კონტენტი იმისათვის, რომ უზრუნველვყოთ, რომ დიდი რაოდენობით კონტენტი არ იძლევა განლაგების განსხვავების საშუალებას, ჩვენ ვიყენებთ overflow: auto . გამოჩნდება ვერტიკალური გადახვევის პანელი. თქვენ ასევე შეგიძლიათ დაამატოთ მაქსიმალური სიმაღლე: 100%;

თუ შიგთავსს არ აქვს დამატებითი შიგთავსი.

.Absolute-Center.is-Overflow ( სიგანე: 50%; სიმაღლე: 300 პიქსელი; მაქსიმალური სიმაღლე: 100%; ზღვარი: ავტო; გადინება: ავტო; პოზიცია: აბსოლუტური; ზედა: 0; მარცხნივ: 0; ქვედა: 0; მარჯვნივ : 0;
სურათები ეს მეთოდი მშვენივრად მუშაობს სურათებზეც! სტილის სიმაღლის დამატება: ავტო;
შემდეგ გამოსახულება მასშტაბირდება კონტეინერთან ერთად.

Absolute-Center.is-Image ( სიგანე: 50%; სიმაღლე: ავტომატური; ზღვარი: ავტო; პოზიცია: აბსოლუტური; ზედა: 0; მარცხნივ: 0; ქვედა: 0; მარჯვნივ: 0; )

სხვა მეთოდები აღწერილი მეთოდი უმეტეს შემთხვევაში მშვენივრად მუშაობს, მაგრამ არსებობს სხვა მეთოდები, რომლებიც შეიძლება გამოყენებულ იქნას კონკრეტული პრობლემების გადასაჭრელად, ალბათ, ყველაზე პოპულარული მეთოდი. ვარგისია, თუ ცნობილია ბლოკის ზომები.

არის-უარყოფითი ( სიგანე: 300 პიქსელი; სიმაღლე: 200 პიქსელი; ბალიშები: 20 პიქსელი; პოზიცია: აბსოლუტური; ზედა: 50%; მარცხნივ: 50%; ზღვარი მარცხნივ: -170 პიქსელი; /* (სიგანე + შიგთავსი)/2 */ ზღვარი- ზედა: -120 პიქსელი /* (სიმაღლე + ბალიშები)/2 */ )
უპირატესობები:

ჯვარედინი ბრაუზერის თავსებადობა
მინიმალური კოდი

ხარვეზები:

არა ადაპტური
განლაგება იშლება, თუ კონტეინერში ძალიან ბევრი შინაარსია
თქვენ უნდა კომპენსაცია გაუკეთოთ ბალიშს ან გამოიყენოთ box-sizing: border-box

ტრანსფორმაციის გამოყენება ერთ-ერთი უმარტივესი მეთოდი, მხარს უჭერს სიმაღლის ცვლილებას. ამ თემაზე არის დეტალური სტატია - "პროცენტული სიგანის/სიმაღლის ელემენტების ცენტრირება" CSS-Tricks-დან.

არის-ტრანსფორმირებული (სიგანე: 50%; ზღვარი: ავტომატური; პოზიცია: აბსოლუტური; ზევით: 50%; მარცხნივ: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate( -50%,-50%) გარდაქმნა: თარგმნა(-50%,-50%);
უპირატესობები:

ცვალებადი სიმაღლე
მინიმალური კოდი

ხარვეზები:

არ მუშაობს IE 8-ში
პრეფიქსების გამოყენება
შეიძლება ხელი შეუშალოს სხვა ტრანსფორმაციის ეფექტებს
ზოგიერთ შემთხვევაში, ბლოკის კიდეები და ტექსტი ბუნდოვანია რენდერის დროს

მაგიდის უჯრედი ალბათ ერთ-ერთი საუკეთესო და მარტივი გზაა. დეტალურად აღწერილია სტატიაში "მოქნილი სიმაღლის ვერტიკალური ცენტრირება CSS-ით, IE7-ის მიღმა" 456bereasttreet-ის მიერ. მთავარი ნაკლი არის დამატებითი მარკირება: საჭიროა სამი ელემენტი:

CSS:
.Pos-Container.is-Table ( ჩვენება: მაგიდა; ) .is-Table .Table-Cell ( ჩვენება: ცხრილის უჯრედი; ვერტიკალური გასწორება: შუა; ) .is-Table .Center-Block ( სიგანე: 50%; ზღვარი: 0 ავტო;
უპირატესობები:

ცვალებადი სიმაღლე
განლაგება არ მუშაობს, როდესაც ბლოკში დიდი რაოდენობით ტექსტია
ჯვარედინი ბრაუზერის თავსებადობა

ხარვეზები:

რთული სტრუქტურა

Flexbox CSS-ის მომავალი, flexbox გადაწყვეტს დღევანდელი განლაგების ბევრ პრობლემას. ეს დეტალურად წერია Smashing Magazine-ის სტატიაში, სახელწოდებით Flexbox-ით ელემენტების ცენტრირება.

Pos-Container.is-Flexbox ( ჩვენება: -webkit-box; ჩვენება: -moz-box; ჩვენება: -ms-flexbox; ჩვენება: -webkit-flex; ჩვენება: flex; -webkit-box-align: ცენტრში; - moz-box-align: -ms-flex-align: -webkit-align-items: center -ms-flex-pack: -webkit-content; : ცენტრი;
უპირატესობები:

შინაარსი შეიძლება იყოს ნებისმიერი სიმაღლე ან სიგანე
შეიძლება გამოყენებულ იქნას უფრო რთულ შემთხვევებში

ხარვეზები:

IE 8-9-ის მხარდაჭერა არ არის
მოითხოვს კონტეინერს ან სტილებს სხეულში
თანამედროვე ბრაუზერებში სწორად მუშაობისთვის საჭიროა პრეფიქსების მრავალფეროვნება
შესრულების შესაძლო პრობლემები

დედააზრი თითოეულ მეთოდს აქვს დადებითი და უარყოფითი მხარეები. არსებითად, არჩევანი დამოკიდებულია იმაზე, თუ რომელი ბრაუზერები უნდა იყოს მხარდაჭერილი

div ბლოკების შექმნისას, ალბათ შეგხვედრიათ სიტუაციები, როდესაც გჭირდებათ თქვენი div ჰორიზონტალურად და ვერტიკალურად ცენტრირება სუფთა CSS-ის გამოყენებით. მაგალითად, ამომხტარი ფანჯრების შექმნისას . ცენტრირების განხორციელების რამდენიმე გზა არსებობს და ამ სტატიაში მე გაგიზიარებთ ჩემს საყვარელ და მარტივ გზებს, CSS ან jQuery-ის გამოყენებით.

პირველი, საფუძვლები:

ჰორიზონტალური ცენტრირება CSS-ში

ამის გაკეთება ადვილია, ჩვენ ვიყენებთ ზღვარიჩვენთვის დივბლოკი.

ClassName (ზღვარი: 0 ავტო; სიგანე: 200 პიქსელი; სიმაღლე: 200 პიქსელი; )

div ბლოკის მხოლოდ ჰორიზონტალურად დასაყრდენად, თქვენ უნდა განსაზღვროთ ბლოკის სიგანე (სიგანე), გამოიყენოთ ავტო თვისება მარცხენა და მარჯვენა მინდვრებისთვის. ეს მეთოდი იმუშავებს ყველა ბლოკის ელემენტზე (div, p, h1 და ასე შემდეგ...). ჰორიზონტალური ცენტრირების გამოსაყენებლად ინლაინ ელემენტებზე (ბმულები, სურათები...), თქვენ უნდა გამოიყენოთ ჩვენება: ბლოკი;

ჰორიზონტალური და ვერტიკალური ცენტრირება CSS-ში

Div ბლოკის ცენტრირება ჰორიზონტალურად და ვერტიკალურად ამავე დროს ცოტა უფრო რთულია. წინასწარ უნდა იცოდეთ div ბლოკის ზომები.

ClassName (სიგანე: 300 პიქსელი; სიმაღლე: 200 პიქსელი; პოზიცია: აბსოლუტური; მარცხნივ: 50%; ზედა: 50%; ზღვარი: -100 პიქსელი 0 0 -150 პიქსელი; )

ბლოკის აბსოლუტური პოზიციონირების გამოყენებით, ჩვენ შეგვიძლია გამოვყოთ იგი მიმდებარე ელემენტებიდან და განვსაზღვროთ მისი პოზიცია ბრაუზერის ფანჯრის ზომასთან მიმართებაში. გადაიტანეთ div ბლოკი 50% ფანჯრის მარცხნივ და ზედა. ბლოკის ზედა მარცხენა კუთხე ახლა ბრაუზერის ფანჯრის ცენტრშია. რჩება მხოლოდ div ბლოკის განთავსება გვერდის ცენტრში მისი სიგანის ნახევარი მარცხნივ და ნახევარი სიმაღლის ზემოთ გადაადგილებით. ჰოო! შედეგი იყო შესანიშნავი ბლოკის ცენტრირება სუფთა CSS კოდის გამოყენებით.

ჰორიზონტალური და ვერტიკალური ცენტრირება jQuery-ით

როგორც უკვე აღვნიშნეთ - CSS ცენტრირების მეთოდი მუშაობს მხოლოდ ფიქსირებული ზომებით. თუ ზომები არ არის განსაზღვრული, jQuery მეთოდი მოვა სამაშველოში:

$. ( ))/2, ზედა: ($(ფანჯარა).სიმაღლე() - $(".className").outerHeight())/2 )); // ფუნქციის გასაშვებად ფანჯრის ჩატვირთვისას: $(window).resize();

ამ მეთოდის ოპერაცია არის resize() ფუნქციის გაშვება ხაზის გამოყენებით $(window).resize() . ეს ფუნქცია მუშაობს ბრაუზერის ფანჯრის ზომის შეცვლისას. ჩვენ ვიყენებთ outerWidth() და outerHeight(), რადგან, სიგანე() და height()-ისგან განსხვავებით, ისინი შეიცავს საზღვრების ბალიშს და სისქეს იმ ზომაში, რომელსაც ისინი უბრუნდებიან. ბოლო ხაზი იწყებს div ბლოკის ცენტრირების პროცესს გვერდის ჩატვირთვისას.

ამ მეთოდის გამოყენების უპირატესობა ის არის, რომ თქვენ შეიძლება არ იცოდეთ რა ზომის არის div. მთავარი ნაკლი ის არის, რომ ის მუშაობს მხოლოდ მაშინ, როდესაც ჩართულია JavaScript. ამიტომ, ეს მეთოდი მისაღებია მრავალფუნქციური ინტერფეისებისთვის, როგორიცაა VKontakte, Facebook და ა.შ.

როგორც ყოველთვის, მოგერიდებათ შემოგთავაზოთ თქვენი საყვარელი მეთოდი ბლოკების ცენტრირებისთვის კომენტარის საშუალებით.

ჩვენ ყველამ ვიცოდით მარჟის შესახებ: 0 ავტო;

მოდით უფრო ახლოს მივხედოთ მეთოდს.
უპირატესობები
ჯვარედინი ბრაუზერის თავსებადობა (IE 8-10-ის ჩათვლით)
დამატებითი მარკირების გარეშე, მინიმალური სტილი
ადაპტაცია

დამოუკიდებლობა ბალიშებისგან (ყუთის ზომის გარეშე!)

მუშაობს სურათებისთვის
ხარვეზები
სიმაღლე უნდა იყოს მითითებული (იხ. ცვლადი სიმაღლე)

მიზანშეწონილია დააყენოთ overflow: auto, რათა შინაარსი არ გავრცელდეს

Windows Phone-ზე არ მუშაობს

ხოლო ზღვარი დაყენებულია: ავტო;

შინაარსის ბლოკი სწორად იქნება ორიენტირებული სიმაღლეზე.

მარცხნივ გასწორებისთვის.

თუ შიგთავსს არ აქვს დამატებითი შიგთავსი.

.Absolute-Center.is-Overflow ( სიგანე: 50%; სიმაღლე: 300 პიქსელი; მაქსიმალური სიმაღლე: 100%; ზღვარი: ავტო; გადინება: ავტო; პოზიცია: აბსოლუტური; ზედა: 0; მარცხნივ: 0; ქვედა: 0; მარჯვნივ : 0;
სურათები ეს მეთოდი მშვენივრად მუშაობს სურათებზეც! სტილის სიმაღლის დამატება: ავტო;
შემდეგ გამოსახულება მასშტაბირდება კონტეინერთან ერთად.

ჯვარედინი ბრაუზერის თავსებადობა
მინიმალური კოდი

ხარვეზები:

არა ადაპტური
განლაგება იშლება, თუ კონტეინერში ძალიან ბევრი შინაარსია
თქვენ უნდა კომპენსაცია გაუკეთოთ ბალიშს ან გამოიყენოთ box-sizing: border-box

ცვალებადი სიმაღლე
მინიმალური კოდი

ხარვეზები:

არ მუშაობს IE 8-ში
პრეფიქსების გამოყენება
შეიძლება ხელი შეუშალოს სხვა ტრანსფორმაციის ეფექტებს
ზოგიერთ შემთხვევაში, ბლოკის კიდეები და ტექსტი ბუნდოვანია რენდერის დროს

ცვალებადი სიმაღლე
განლაგება არ მუშაობს, როდესაც ბლოკში დიდი რაოდენობით ტექსტია
ჯვარედინი ბრაუზერის თავსებადობა

ხარვეზები:

რთული სტრუქტურა

შინაარსი შეიძლება იყოს ნებისმიერი სიმაღლე ან სიგანე
შეიძლება გამოყენებულ იქნას უფრო რთულ შემთხვევებში

ხარვეზები:

IE 8-9-ის მხარდაჭერა არ არის
მოითხოვს კონტეინერს ან სტილებს სხეულში
თანამედროვე ბრაუზერებში სწორად მუშაობისთვის საჭიროა პრეფიქსების მრავალფეროვნება
შესრულების შესაძლო პრობლემები

დედააზრი თითოეულ მეთოდს აქვს დადებითი და უარყოფითი მხარეები. არსებითად, არჩევანი დამოკიდებულია იმაზე, თუ რომელი ბრაუზერები უნდა იყოს მხარდაჭერილი
02/18/15 21.4K

თუ html-ის საფუძველზე შექმნილ ნებისმიერ ვებსაიტს გაჭრით, ნახავთ გარკვეულ ფენოვან სტრუქტურას. უფრო მეტიც, მისი გარეგნობა ფენის ნამცხვრის მსგავსი იქნება. თუ ასე ფიქრობთ, მაშინ დიდი ხანია არ გიჭამიათ. ასე რომ, ჯერ დააკმაყოფილეთ თქვენი შიმშილი და შემდეგ ჩვენ გეტყვით, თუ როგორ მოაწყოთ div ფენა თქვენს საიტზე:

განლაგების უპირატესობები ტეგის გამოყენებით

ვებგვერდის სტრუქტურის ორი ძირითადი ტიპი არსებობს:

ცხრილი;
ბლოკირება.

ცხრილის განლაგება დომინანტური იყო ინტერნეტის გარიჟრაჟზეც კი. მის უპირატესობებში შედის მითითებული პოზიციონირების სიზუსტე. მაგრამ, მიუხედავად ამისა, მას აქვს აშკარა უარყოფითი მხარეები. მთავარია კოდის სიგრძე და ჩატვირთვის დაბალი სიჩქარე.

ტაბულური განლაგების გამოყენებისას, ვებ გვერდი არ გამოჩნდება, სანამ ის სრულად არ ჩაიტვირთება. ხოლო div ბლოკების გამოყენებისას ელემენტები დაუყოვნებლივ გამოჩნდება.

მაღალი ჩატვირთვის სიჩქარის გარდა, ვებსაიტის ბლოკის კონსტრუქცია საშუალებას გაძლევთ რამდენჯერმე შეამციროთ html კოდის რაოდენობა. მათ შორის CSS კლასების გამოყენებით.

თუმცა, ცხრილის განლაგება უნდა იყოს გამოყენებული გვერდზე მონაცემების ჩვენების სტრუქტურირებისთვის. მისი გამოყენების კლასიკური მაგალითია ცხრილების ჩვენება.

ტეგებზე დაფუძნებული ბლოკის მშენებლობას ასევე უწოდებენ ფენა-ფენა, ხოლო თავად ბლოკებს უწოდებენ ფენებს. ეს იმიტომ ხდება, რომ როდესაც გამოიყენება გარკვეული საკუთრების მნიშვნელობები, ისინი შეიძლება დადგეს ერთმანეთზე, Photoshop-ის ფენების მსგავსად.

პოზიციონირების დამხმარე საშუალებები

ბლოკის განლაგებაში უმჯობესია ფენების განლაგება კასკადური სტილის ფურცლების გამოყენებით. ძირითადი CSS თვისება, რომელიც პასუხისმგებელია განლაგებაზე, არის float.
თვისების სინტაქსი:
float: მარცხენა | მარჯვენა | არცერთი | მემკვიდრეობით
სად:

მარცხნივ – გაასწორეთ ელემენტი ეკრანის მარცხენა კიდეზე. ნაკადი დარჩენილი ელემენტების გარშემო ხდება მარჯვნივ;
მარჯვნივ – გასწორება მარჯვნივ, ნაკადი სხვა ელემენტების გარშემო – მარცხნივ;
არცერთი – შეფუთვა დაუშვებელია;
inherit – იღებს მემკვიდრე ელემენტის მნიშვნელობას.

მოდით შევხედოთ ამ თვისების გამოყენებით div-ების პოზიციონირების მსუბუქ მაგალითს:

#left ( სიგანე: 200px; სიმაღლე: 100px; float: მარცხნივ; ფონი: rgb(255,51,102); ) #right ( სიგანე: 200px; სიმაღლე: 100px; float: მარჯვნივ; ფონი: rgb(0,255,153); ) მარცხენა ბლოკი მარჯვენა ბლოკი

ახლა ჩვენ შევეცდებით გამოვიყენოთ იგივე თვისება, რათა განვათავსოთ მესამე div გვერდის ცენტრში. მაგრამ სამწუხაროდ float-ს არ აქვს ცენტრალური მნიშვნელობა. და როდესაც ახალ ბლოკს ანიჭებთ გასწორების მნიშვნელობას მარჯვნივ ან მარცხნივ, ის გადაინაცვლებს მითითებული მიმართულებით. ამიტომ, რჩება მხოლოდ float-ის დაყენება: დარჩა სამივე ბლოკზე:

მაგრამ არც ეს არის საუკეთესო ვარიანტი. ფანჯრის ზომაში შემცირებისას ყველა ფენა ერთ რიგში დგას ვერტიკალურად, ხოლო ზომის გაზრდისას ისინი ეკვრება ფანჯრის მარცხენა კიდეს. ასე რომ, ჩვენ გვჭირდება უკეთესი გზა, რათა განვათავსოთ div. ფენების ცენტრირება

შემდეგ მაგალითში გამოვიყენებთ კონტეინერის ფენას, რომელშიც განვათავსებთ დარჩენილ ელემენტებს. ეს წყვეტს ბლოკების გადაადგილების პრობლემას ერთმანეთთან შედარებით, როდესაც იცვლება ფანჯრის ზომა. კონტეინერის ცენტრში დაყენება ხდება ზღვრის თვისებების ნულზე დაყენებით ზედა კიდიდან და ავტო გვერდებზე (ზღვარი: 0 ავტო ):

#container ( სიგანე: 600px; ზღვარი: 0 ავტომატური; ) #მარცხნივ ( სიგანე: 200px; სიმაღლე: 100px; float: მარცხენა; ფონი: rgb(255,51,102); ) #მარჯვნივ ( სიგანე: 200px; სიმაღლე: 100px; float მარცხენა;

იგივე მაგალითი გვიჩვენებს, თუ როგორ შეგიძლიათ დიაპაზონის ჰორიზონტალურად ცენტრირება. და თუ ოდნავ შეცვლით ზემოთ მოცემულ კოდს, შეგიძლიათ მიაღწიოთ ბლოკების ვერტიკალურ გასწორებას. ამისათვის თქვენ უბრალოდ უნდა შეცვალოთ კონტეინერის ფენის სიგრძე (შეამციროთ იგი). ანუ, მისი css კლასის რედაქტირების შემდეგ ასე უნდა გამოიყურებოდეს:

ცვლილების შემდეგ, ყველა ბლოკი მკაცრად რიგდება შუაში. და მათი პოზიცია არ შეიცვლება ბრაუზერის ფანჯრის ზომის მიუხედავად. აი, როგორ გამოიყურება div ვერტიკალურად ცენტრირება:

შემდეგ მაგალითში, ჩვენ გამოვიყენეთ რამდენიმე ახალი css თვისება კონტეინერის შიგნით ფენების დასაცენტრებლად:

#container ( სიგანე: 450px; სიმაღლე:150px; ზღვარი:0 ავტომატური; ფონის ფერი:#66CCFF; ) #left ( სიგანე: 100px; სიმაღლე: 100px; ფონი: rgb(255,51,102); ჩვენება: inline-block; ვერტიკალური გასწორება: შუაში მარცხნივ: 35 პიქსელი; #ცენტრი (სიგანე: 100 პიქსელი; სიმაღლე: 100 პიქსელი; ფონი: rgb(255,0,0); ეკრანი: ჩასმული ბლოკი; ვერტიკალური გასწორება: შუა; ზღვარი მარცხნივ: 35 პიქს; )

css თვისებებისა და მათი მნიშვნელობების მოკლე აღწერა, რომლებიც ამ მაგალითში გამოვიყენეთ div-ის ცენტრატორში:

ჩვენება: inline-block – ასწორებს ბლოკის ელემენტს ხაზში და უზრუნველყოფს მის გადახვევას სხვა ელემენტის გარშემო;
vertical-align: შუა – ასწორებს ელემენტს შუაში მშობელთან შედარებით;
margin-left – აყენებს მარცხენა ზღვარს.

როგორ გავაკეთოთ ბმული ფენიდან

რაც არ უნდა უცნაურად ჟღერდეს, ეს შესაძლებელია. ზოგჯერ შეიძლება დაგჭირდეთ div ბლოკი, როგორც ბმული, სხვადასხვა ტიპის მენიუს განლაგებისას. მოდით შევხედოთ ბმულის ფენის განხორციელების პრაქტიკულ მაგალითს:

#ფენა1( სიგანე: 500 პიქსელი; სიმაღლე: 100 პიქსელი; ფონი: rgb(51,255,204); საზღვარი: ღარი; ) a ( ჩვენება: ბლოკი; ტექსტის გასწორება: ცენტრში; სიმაღლე: 100%; ფერი: rgb(255,0,51) ;) ბმული ჩვენს ვებსაიტზე

ამ მაგალითში, ხაზის ჩვენების გამოყენებით: block, ჩვენ დავაყენეთ ბმული ბლოკის ელემენტის მნიშვნელობაზე. და ისე, რომ div ბლოკის მთელი სიმაღლე გახდეს ბმული, დააყენეთ სიმაღლე: 100%. ბლოკის ელემენტების დამალვა და ჩვენება

ბლოკის ელემენტები უფრო მეტ შესაძლებლობას იძლევა ინტერფეისის ფუნქციონირების გაფართოებისთვის, ვიდრე მოძველებული ცხრილის განლაგება. ხშირად ხდება, რომ ვებსაიტის დიზაინი უნიკალური და ცნობადია. მაგრამ ასეთი ექსკლუზიურისთვის თქვენ უნდა გადაიხადოთ თავისუფალი სივრცის ნაკლებობით.

ეს განსაკუთრებით ეხება მთავარ გვერდს, რომელზეც რეკლამის ღირებულება ყველაზე მაღალია. აქედან გამომდინარე, ჩნდება პრობლემა, თუ სად უნდა „გადასვა“ სხვა სარეკლამო ბანერი. და აქ თქვენ ვერ შეძლებთ გვერდის ცენტრში დივ-ის გასწორებას!

უფრო რაციონალური გამოსავალი არის გარკვეული ბლოკის დამალვა. აქ არის ასეთი განხორციელების მარტივი მაგალითი:

#layer1( display:block; სიგანე: 500px; სიმაღლე: 100px; background: rgb(51,255,204); border:groove; ) ფუნქცია show() ( if(layer1=="none") ( layer1="block"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1)

ეს არის ჯადოსნური ღილაკი. მასზე დაწკაპუნებით დაიმალება ან გამოჩნდება დამალვის ბლოკი.

ამ სტატიაში მე გაჩვენებთ, თუ როგორ უნდა მოაწყოთ div ცენტრი. ბევრი გზა არსებობს, მაგრამ ყველა მათგანი არ გაძლევთ საშუალებას გააკეთოთ ზუსტად ის, რაც გჭირდებათ. მე მოვიყვან საუკეთესო და მარტივი მეთოდების მაგალითებს.

ზოგადად, არსებობს ათეული გზა, რათა სწორად მოაწყოთ div ბლოკი. მაგრამ მიუხედავად ამისა, არსებობს რამდენიმე ძირითადი, ყველაზე პოპულარული და უნივერსალური მეთოდი. და რა თქმა უნდა, მოქმედებს ყველა თანამედროვე სტანდარტით.

დიახ, დაუყოვნებლივ უნდა ითქვას, რომ ეს მეთოდები შეიძლება არ იმუშაოს ie6-ში ან რაიმე მსგავსში. ამ ბრაუზერს ყურადღებასაც არ ვაქცევ, რამდენი ადამიანიც არ უნდა ისარგებლოს. დროა შეწყვიტოთ ძველი ნივთების გამოყენება.

მაშ რა გვაქვს?

მეთოდი 1. ყველაზე მაგარი ზღვარი: 0 ავტო;

ძალიან ეფექტური მეთოდი, რომელიც ასევე საშუალებას გაძლევთ გაასწოროთ ჩაღრმავები ზედა და ქვედა ნაწილში. რა არის მეთოდის ხრიკი? ყველაფერი უბრალოდ გიჟია. გვაქვს ბლოკი გარკვეული სიგანით (პიქსელებში ან პროცენტებში), რომელსაც „auto“ თვისების გამოყენებით ვუსვამთ იმავე ჩაღრმავებას მარჯვნივ და მარცხნივ და შედეგად ვიღებთ ცენტრში div ბლოკს. პირველი მნიშვნელობა (0 მაგალითში) არის ზედა და ქვედა ბალიშები.

მაგალითად, ზედა გასწორებისთვის ჩვენ ვწერთ:

ზღვარი: 10 პიქსელი ავტო;

ზემოდან და ქვემოდან გასასწორებლად:

ზღვარი: 10px ავტო 5px;

ჩემი აზრით, ეს არის საუკეთესო გზა ბლოკების ცენტრში გასწორებისთვის. უფრო მეტიც, ის სრულიად მოქმედებს.

მეთოდი 2. ინტერესი

თუ ბლოკს აქვს პროცენტული სიგანე, მაშინ შეგვიძლია div-ის ცენტრირება თანაბარი ბალიშის გამოყენებით, რათა სრული სიგანე 100%-მდე მივიყვანოთ. ვისაც არ ესმის, მე გაჩვენებთ მაგალითით, ეს უფრო ადვილია:

ჩვენ გვაქვს ბლოკი, რომლის სიგანეა 50%, მის ცენტრთან გასასწორებლად, ჩვენ უნდა გავაკეთოთ გვერდითი მინდვრები 25% მარჯვნივ და მარცხნივ, შესაბამისად. მოდით შევხედოთ კოდს:

დაძაბვის გარეშე ვიღებთ ბლოკს ცენტრში, რომელიც გასწორებულია ბანალურ მათემატიკასთან (50 + 25 + 25) :)

მეთოდი 3. შერეული

ეს მეთოდი იყო რეკომენდებული sman-ის კომენტარებში.

როგორც სტატიის დასაწყისში აღვნიშნე, ბლოკის ცენტრირების მრავალი გზა არსებობს. ყველა ირჩევს იმას, რაც მას ყველაზე მეტად მოსწონს. ველოდები კომენტარებს და ახალ გზებს :)

მეთოდი 4: დამატებითი ბლოკის გამოყენება

მეთოდი ვიქტორი კომენტარებში:

არცერთი მეთოდი არ წყვეტს პრობლემას ბლოკის შიგნით ცურვის შესახებ, თუ ბლოკის სიგანე უცნობია (მაგალითად, მენიუ).

ასეთ შემთხვევებში ვიყენებ დამატებით ბლოკს, რომელიც ახვევს გასწორებულ ბლოკს. სტილი დაახლოებით ასეთია:

#dop-block (პოზიცია: ფარდობითი; float: მარჯვნივ; მარჯვნივ: 50%; ) #block (პოზიცია: ფარდობითი; float: მარცხნივ; მარცხნივ: 50%; )

დიაპაზონის ცენტრირება ჰორიზონტალურად და ვერტიკალურად. CSS ცენტრირების DIV ბლოკები: ჰორიზონტალური და ვერტიკალური

შეატყობინეთ შეცდომას

ტექსტი, რომელიც გაეგზავნება ჩვენს რედაქტორებს:

თქვენი კომენტარი (სურვილისამებრ):