ბლოკის გასწორება გვერდის ცენტრში. ვერტიკალური გასწორება div. ბონუსი: პირობითი კომენტარები
ვფიქრობ, ბევრ თქვენგანს, ვისაც განლაგების პრობლემა მოუწია, წააწყდა ელემენტების ვერტიკალურად გასწორების აუცილებლობას და იცოდეს სირთულეები, რომლებიც წარმოიქმნება ელემენტის ცენტრში გასწორებისას.
დიახ, CSS-ში არის სპეციალური მრავალმნიშვნელოვანი ვერტიკალური გასწორების თვისება ვერტიკალური გასწორებისთვის. თუმცა, პრაქტიკაში ეს საერთოდ არ მუშაობს ისე, როგორც მოსალოდნელია. ვცადოთ ამის გარკვევა.
მოდით შევადაროთ შემდეგი მიდგომები. გასწორება გამოყენებით:
- მაგიდები,
- ჩაღრმავება,
- ხაზის სიმაღლე
- გაჭიმვა,
- უარყოფითი ზღვარი,
- გარდაქმნას
- ფსევდო ელემენტი
- flexbox.
არსებობს ორი div ელემენტი, რომელთაგან ერთი მეორეშია ჩასმული. მივცეთ მათ შესაბამისი კლასები - გარეგანი და შინაგანი.
გამოწვევაა შიდა ელემენტის გასწორება გარე ელემენტის ცენტრთან.
ჯერ განვიხილოთ შემთხვევა, როდესაც გარეგანი და შიდა ერთეული ცნობილია. მოდით დავამატოთ წესის ჩვენება: inline-block შიდა ელემენტს, და text-align: ცენტრი და ვერტიკალური გასწორება: შუა გარე ელემენტს.
გახსოვდეთ, რომ გასწორება ეხება მხოლოდ ელემენტებს, რომლებსაც აქვთ inline ან inline-block ჩვენების რეჟიმი.
მოდით დავაყენოთ ბლოკების ზომები, ასევე ფონის ფერები, რათა დავინახოთ მათი საზღვრები.
გარე (სიგანე: 200 პიქსელი; სიმაღლე: 200 პიქსელი; ტექსტის გასწორება: ცენტრში; ვერტიკალური გასწორება: შუა; ფონის ფერი: #ffc; ) .შიდა ( ეკრანი: ჩასმული ბლოკი; სიგანე: 100 პიქსელი; სიმაღლე: 100 პიქსელი; ფონის ფერი : #fcc;)
სტილის გამოყენების შემდეგ, ჩვენ დავინახავთ, რომ შიდა ბლოკი ჰორიზონტალურად არის გასწორებული, მაგრამ არა ვერტიკალურად:
http://jsfiddle.net/c1bgfffq/
რატომ მოხდა ეს?საქმე ისაა, რომ ვერტიკალური გასწორების თვისება გავლენას ახდენს გასწორებაზე თავად ელემენტი და არა მისი შინაარსი(გარდა იმ შემთხვევებისა, როდესაც ის გამოიყენება ცხრილის უჯრედებზე). ამიტომ, ამ თვისების გარე ელემენტზე გამოყენებამ არაფერი გამოიღო. უფრო მეტიც, ამ თვისების გამოყენება შიდა ელემენტზე ასევე არაფერს მოუტანს, რადგან inline-ბლოკები ვერტიკალურად არის გასწორებული მიმდებარე ბლოკებთან მიმართებაში და ჩვენს შემთხვევაში გვაქვს ერთი inline ბლოკი.
ამ პრობლემის გადასაჭრელად რამდენიმე ტექნიკა არსებობს. ქვემოთ ჩვენ უფრო დეტალურად განვიხილავთ თითოეულ მათგანს.
გასწორება ცხრილის გამოყენებით
პირველი გამოსავალი, რომელიც მახსენდება, არის გარე ბლოკის შეცვლა ერთი უჯრედის ცხრილით. ამ შემთხვევაში, გასწორება გამოყენებული იქნება უჯრედის შიგთავსზე, ანუ შიდა ბლოკზე.
http://jsfiddle.net/c1bgfffq/1/
ამ გადაწყვეტის აშკარა მინუსი არის ის, რომ სემანტიკური თვალსაზრისით, არასწორია ცხრილების გამოყენება გასწორებისთვის. მეორე მინუსი არის ის, რომ ცხრილის შექმნა მოითხოვს სხვა ელემენტის დამატებას გარე ბლოკის გარშემო.
პირველი მინუსი შეიძლება ნაწილობრივ მოიხსნას ცხრილისა და td ტეგების div-ით ჩანაცვლებით და CSS-ში ცხრილის ჩვენების რეჟიმის დაყენებით.
.გარე შეფუთვა ( ჩვენება: მაგიდა; ) .გარე ( ჩვენება: ცხრილის უჯრედი; )
თუმცა, გარე ბლოკი კვლავ დარჩება მაგიდად ყველა შემდგომი შედეგით.
გასწორება შეწევის გამოყენებით
თუ ცნობილია შიდა და გარე ბლოკების სიმაღლეები, მაშინ განლაგება შეიძლება დაყენდეს შიდა ბლოკის ვერტიკალური ჩაღრმავების გამოყენებით ფორმულის გამოყენებით: (H გარე – H შიდა) / 2.გარე ( სიმაღლე: 200 პიქსელი; ) .შიდა (სიმაღლე: 100 პიქსელი; ზღვარი: 50 პიქსელი 0; )
http://jsfiddle.net/c1bgfffq/6/
გადაწყვეტის მინუსი არის ის, რომ იგი გამოიყენება მხოლოდ შეზღუდული რაოდენობის შემთხვევაში, როდესაც ცნობილია ორივე ბლოკის სიმაღლე.
გასწორება ხაზის სიმაღლის გამოყენებით
თუ იცით, რომ შიდა ბლოკმა უნდა დაიკავოს ტექსტის არაუმეტეს ერთი ხაზი, მაშინ შეგიძლიათ გამოიყენოთ ხაზის სიმაღლე და დააყენოთ იგი გარე ბლოკის სიმაღლის ტოლი. ვინაიდან შიდა ბლოკის შინაარსი არ უნდა გადაიტანოს მეორე სტრიქონზე, რეკომენდირებულია ასევე დაამატოთ თეთრი სივრცე: nowrap და overflow: ფარული წესები.გარე (სიმაღლე: 200 პიქსელი; ხაზის სიმაღლე: 200 პიქსელი; ) .შიდა (თეთრი სივრცე: nowrap; გადინება: დამალული;)
http://jsfiddle.net/c1bgfffq/12/
ეს ტექნიკა ასევე შეიძლება გამოყენებულ იქნას მრავალხაზოვანი ტექსტის გასასწორებლად, თუ თქვენ ხელახლა განსაზღვრავთ ხაზის სიმაღლის მნიშვნელობას შიდა ბლოკისთვის და ასევე დაამატებთ ეკრანს: inline-block და vertical-align: შუა წესებს.
გარე ( სიმაღლე: 200 პიქსელი; ხაზის სიმაღლე: 200 პიქსელი; ) .შიდა (ხაზის სიმაღლე: ნორმალური; დისპლეი: შიდა ბლოკი; ვერტიკალური გასწორება: შუა; )
http://jsfiddle.net/c1bgfffq/15/
ამ მეთოდის მინუსი ის არის, რომ გარე ბლოკის სიმაღლე უნდა იყოს ცნობილი.
გასწორება "გაჭიმვის" გამოყენებით
ეს მეთოდი შეიძლება გამოყენებულ იქნას, როდესაც გარე ბლოკის სიმაღლე უცნობია, მაგრამ ცნობილია შიდა ბლოკის სიმაღლე.ამისათვის საჭიროა:
- კომპლექტი გარე ერთეულიფარდობითი პოზიციონირება, ხოლო შიდა პოზიციონირება აბსოლუტურია;
- დაამატეთ წესები ზედა: 0 და ქვედა: 0 შიდა ბლოკს, რის შედეგადაც იგი გაიჭიმება გარე ბლოკის მთელ სიმაღლეზე;
- დააყენეთ შიდა ბლოკის ვერტიკალური შიგთავსი ავტომატზე.
http://jsfiddle.net/c1bgfffq/4/
იდეა ამ ტექნიკის უკან არის ის, რომ სიმაღლის დაყენება დაჭიმული და აბსოლუტურად განლაგებული ბლოკისთვის ბრაუზერს აიძულებს გამოთვალოს ვერტიკალური ბალიშები თანაბარი თანაფარდობით, თუ ის დაყენებულია ავტომატურზე.
გასწორება უარყოფითი ზღვრით-ზევით
ეს მეთოდი ფართოდ გახდა ცნობილი და ძალიან ხშირად გამოიყენება. წინას მსგავსად, იგი გამოიყენება, როდესაც გარე ბლოკის სიმაღლე უცნობია, მაგრამ ცნობილია შიდა ბლოკის სიმაღლე.თქვენ უნდა დააყენოთ გარე ბლოკი შედარებით პოზიციონირებაზე, ხოლო შიდა ბლოკი აბსოლუტურ პოზიციონირებაზე. შემდეგ თქვენ უნდა გადაიტანოთ შიდა ბლოკი გარე ბლოკის ზედა სიმაღლის ნახევრით ქვემოთ: 50% და აწიოთ იგი ნახევრად მაღლა საკუთარი სიმაღლის ზღვარი-ზედა: -H შიდა / 2.
გარე (პოზიცია: ფარდობითი; ) .შიდა (სიმაღლე: 100 პიქსელი; პოზიცია: აბსოლუტური; ზედა: 50%; ზღვარი ზედა: -50 პიქსელი; )
http://jsfiddle.net/c1bgfffq/13/
ამ მეთოდის მინუსი ის არის, რომ შიდა ბლოკის სიმაღლე უნდა იყოს ცნობილი.
ტრანსფორმაციასთან გასწორება
ეს მეთოდი წინა მეთოდის მსგავსია, მაგრამ მისი გამოყენება შესაძლებელია, როდესაც შიდა განყოფილების სიმაღლე უცნობია. ამ შემთხვევაში, იმის ნაცვლად, რომ დააყენოთ უარყოფითი პიქსელის შიგთავსი, შეგიძლიათ გამოიყენოთ ტრანსფორმაციის თვისება და გადაიტანოთ შიდა ბლოკი ზევით translateY ფუნქციისა და -50% მნიშვნელობის გამოყენებით.გარე (პოზიცია: ფარდობითი; ) .შიდა (პოზიცია: აბსოლუტური; ზედა: 50%; ტრანსფორმაცია: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
რატომ იყო შეუძლებელი მნიშვნელობის პროცენტულად დაყენება წინა მეთოდით? იმის გამო, რომ პროცენტული ზღვრის მნიშვნელობები გამოითვლება მშობელ ელემენტთან მიმართებაში, მნიშვნელობა 50% იქნება გარე ყუთის სიმაღლის ნახევარი და ჩვენ დაგვჭირდება შიდა ყუთის აწევა ნახევარზე. ტრანსფორმაციის თვისება შესანიშნავია ამისათვის.
ამ მეთოდის მინუსი ის არის, რომ მისი გამოყენება შეუძლებელია, თუ შიდა ერთეულს აქვს აბსოლუტური განლაგება.
გასწორება Flexbox-თან
ყველაზე თანამედროვე გზავერტიკალური გასწორება არის მოქნილი ყუთის განლაგება (პოპულარულად ცნობილია როგორც Flexbox). ეს მოდული საშუალებას გაძლევთ მოქნილად გააკონტროლოთ ელემენტების განლაგება გვერდზე, მოაწყოთ ისინი თითქმის ყველგან. Flexbox-ისთვის ცენტრის გასწორება ძალიან მარტივი ამოცანაა.გარე ბლოკი უნდა იყოს დაყენებული, რომ გამოჩნდეს: flex და შიდა ბლოკი ზღვარზე: auto. და ეს ყველაფერი! მშვენიერია, არა?
გარე (დისპლეი: მოქნილი; სიგანე: 200 პიქსელი; სიმაღლე: 200 პიქსელი; ) .შიდა (სიგანე: 100 პიქსელი; ზღვარი: ავტომატური;)
http://jsfiddle.net/c1bgfffq/14/
ამ მეთოდის მინუსი ის არის, რომ Flexbox მხარდაჭერილია მხოლოდ თანამედროვე ბრაუზერებით.
რომელი მეთოდი ავირჩიო?
თქვენ უნდა დაიწყოთ პრობლემის განცხადებიდან:- ტექსტის ვერტიკალურად გასასწორებლად, უმჯობესია გამოიყენოთ ვერტიკალური შეწევა ან ხაზის სიმაღლე.
- აბსოლიტურად განლაგებული ელემენტებისთვის ცნობილი სიმაღლით (მაგალითად, ხატები), მეთოდი ნეგატიური ზღვრის ზედა თვისებით იდეალურია.
- უფრო რთული შემთხვევებისთვის, როდესაც ბლოკის სიმაღლე უცნობია, თქვენ უნდა გამოიყენოთ ფსევდო ელემენტი ან ტრანსფორმაციის თვისება.
- ისე, თუ იმდენად გაგიმართლათ, რომ არ გჭირდებათ IE ბრაუზერის ძველი ვერსიების მხარდაჭერა, მაშინ, რა თქმა უნდა, უმჯობესია გამოიყენოთ Flexbox.
ელემენტების ვერტიკალურად ცენტრირება CSS-ის გამოყენებით არის ამოცანა, რომელიც გარკვეულ სირთულეს წარმოადგენს დეველოპერებისთვის. თუმცა მისი გადაჭრის რამდენიმე მეთოდი არსებობს, რომლებიც საკმაოდ მარტივია. ამ გაკვეთილზე წარმოდგენილია შინაარსის ვერტიკალურად ცენტრირების 6 ვარიანტი.
დავიწყოთ იმით ზოგადი აღწერადავალებები.
ვერტიკალური ცენტრირების პრობლემა
ჰორიზონტალური ცენტრირება ძალიან მარტივი და მარტივია. როდესაც ცენტრირებული ელემენტი ჩართულია, ჩვენ ვიყენებთ გასწორების თვისებას მშობელ ელემენტთან მიმართებაში. როდესაც ელემენტი არის ბლოკის დონეზე, ჩვენ ვაყენებთ მის სიგანეს და ავტომატური ინსტალაციამარცხენა და მარჯვენა მინდვრები.
ადამიანების უმეტესობა, ტექსტის გასწორება: თვისების გამოყენებისას, მიმართავს ვერტიკალური გასწორების თვისებას ვერტიკალური ცენტრირებისთვის. ყველაფერი საკმაოდ ლოგიკურად გამოიყურება. თუ თქვენ იყენებდით ცხრილის შაბლონებს, ალბათ ფართოდ იყენებდით valign ატრიბუტს, რაც აძლიერებს რწმენას, რომ ვერტიკალური გასწორება პრობლემის გადაჭრის სწორი გზაა.
მაგრამ valign ატრიბუტი მუშაობს მხოლოდ ცხრილის უჯრედებზე. და ვერტიკალური გასწორების თვისება ძალიან ჰგავს მას. ის ასევე გავლენას ახდენს ცხრილის უჯრედებზე და ზოგიერთ შიდა ელემენტზე.
ვერტიკალური გასწორების საკუთრების მნიშვნელობა შეფარდებითია მშობლის შიდა ელემენტთან.
- ტექსტის სტრიქონში გასწორება შეესაბამება ხაზის სიმაღლეს.
- ცხრილის უჯრედი იყენებს გასწორებას მნიშვნელობის მიმართ, რომელიც გამოითვლება სპეციალური ალგორითმით (ჩვეულებრივ, მწკრივის სიმაღლე).
სამწუხაროდ, ვერტიკალური გასწორების თვისება არ მუშაობს ბლოკის დონის ელემენტებზე (მაგალითად, აბზაცები div ელემენტის შიგნით). ამ სიტუაციამ შეიძლება იფიქროს, რომ ვერტიკალური განლაგების პრობლემის გადაწყვეტა არ არსებობს.
მაგრამ არსებობს ბლოკის ელემენტების ცენტრირების სხვა მეთოდები, რომელთა არჩევანი დამოკიდებულია იმაზე, თუ რა არის ორიენტირებული გარე კონტეინერთან მიმართებაში.
ხაზის სიმაღლის მეთოდი
ეს მეთოდი მუშაობს, როდესაც გსურთ ტექსტის ერთი ხაზის ვერტიკალურად ცენტრში მოთავსება. თქვენ მხოლოდ უნდა დააყენოთ ხაზის სიმაღლე შრიფტის ზომაზე დიდი.
ნაგულისხმევი თავისუფალი სივრცეთანაბრად გადანაწილდება ტექსტის ზემოთ და ქვემოთ. და ხაზი იქნება ცენტრში ვერტიკალურად. ხშირად ხაზის სიმაღლე ხდება ელემენტის სიმაღლის ტოლი.
HTML:
CSS:
#ბავშვი (ხაზის სიმაღლე: 200 პიქსელი; )
ეს მეთოდი მუშაობს ყველა ბრაუზერში, თუმცა მისი გამოყენება შესაძლებელია მხოლოდ ერთი ხაზისთვის. მაგალითში მნიშვნელობა 200 px აირჩია თვითნებურად. თქვენ შეგიძლიათ გამოიყენოთ ნებისმიერი მნიშვნელობა, რომელიც აღემატება ტექსტის შრიფტის ზომას.
სურათის ცენტრირება ხაზის სიმაღლის გამოყენებით
რა მოხდება, თუ შინაარსი არის სურათი? იმუშავებს ზემოთ მოყვანილი მეთოდი? პასუხი დევს CSS კოდის კიდევ ერთ სტრიქონში.
HTML:
CSS:
#parent (ხაზის სიმაღლე: 200px; ) #parent img (ვერტიკალური გასწორება: შუა; )
ხაზის სიმაღლე თვისების მნიშვნელობა უნდა იყოს გამოსახულების სიმაღლეზე მეტი.
CSS ცხრილის მეთოდი
ზემოთ აღინიშნა, რომ ვერტიკალური გასწორების თვისება გამოიყენება ცხრილის უჯრედებისთვის, სადაც ის მშვენივრად მუშაობს. ჩვენ შეგვიძლია გამოვაჩინოთ ჩვენი ელემენტი ცხრილის უჯრედად და გამოვიყენოთ მასზე ვერტიკალური გასწორების თვისება კონტენტის ვერტიკალურად ცენტრისთვის.
Შენიშვნა: CSS ცხრილი არ არის იგივე, რაც HTML ცხრილი.
HTML:
CSS:
#მშობელი (ჩვენება: მაგიდა;) #child ( ჩვენება: ცხრილის უჯრედი; ვერტიკალური გასწორება: შუა; )
ჩვენ ვაყენებთ ცხრილის გამომავალს მშობელ div ელემენტზე და გამოვაქვთ ჩადგმული div ელემენტი ცხრილის უჯრედად. ახლა შეგიძლიათ გამოიყენოთ ვერტიკალური გასწორების თვისება შიდა კონტეინერზე. მასში ყველაფერი ვერტიკალურად იქნება ორიენტირებული.
ზემოთ აღწერილი მეთოდისგან განსხვავებით, ქ ამ შემთხვევაშიშინაარსი შეიძლება იყოს დინამიური, რადგან div ელემენტი ზომავს მისი შინაარსის მიხედვით.
ამ მეთოდის მინუსი ის არის, რომ ის არ მუშაობს IE-ის ძველ ვერსიებში. თქვენ უნდა გამოიყენოთ ჩვენება: inline-block თვისება წყობილი კონტეინერისთვის.
აბსოლუტური პოზიციონირება და უარყოფითი მინდვრები
ეს მეთოდი ასევე მუშაობს ყველა ბრაუზერში. მაგრამ ის მოითხოვს, რომ ელემენტს, რომელიც ცენტრშია, მიენიჭოს სიმაღლე.
მაგალითის კოდი ასრულებს ჰორიზონტალურ და ვერტიკალურ ცენტრს ერთდროულად:
HTML:
CSS:
#მშობელი (პოზიცია: ნათესავი;) #შვილი (პოზიცია: აბსოლუტური; ზედა: 50%; მარცხნივ: 50%; სიმაღლე: 30%; სიგანე: 50%; ზღვარი: -15% 0 0 -25%; )
პირველ რიგში, ჩვენ დავაყენეთ ელემენტის პოზიციონირების ტიპი. შემდეგი, ჩვენ დავაყენეთ ჩადგმული div ელემენტის ზედა და მარცხენა თვისებები 50%-ზე, რაც შეესაბამება მთავარი ელემენტის ცენტრს. მაგრამ ცენტრი არის წყობილი ელემენტის ზედა მარცხენა კუთხე. ამიტომ, თქვენ უნდა აწიოთ იგი (სიმაღლის ნახევარი) და გადაიტანოთ მარცხნივ (სიგანის ნახევარი), შემდეგ კი ცენტრი დაემთხვევა მშობელი ელემენტის ცენტრს. ასე რომ, ამ შემთხვევაში ელემენტის სიმაღლის ცოდნა აუცილებელია. შემდეგ დავაყენეთ ელემენტი უარყოფითი ზედა და მარცხენა მინდვრებით, შესაბამისად, სიმაღლისა და სიგანის ნახევრის ტოლი.
ეს მეთოდი არ მუშაობს ყველა ბრაუზერში.
აბსოლუტური პოზიციონირება და გაჭიმვა
მაგალითის კოდი ასრულებს ვერტიკალურ და ჰორიზონტალურ ცენტრირებას.
HTML:
CSS:
#მშობელი (პოზიცია: ნათესავი;) #შვილი (პოზიცია: აბსოლუტური; ზედა: 0; ქვედა: 0; მარცხნივ: 0; მარჯვნივ: 0; სიგანე: 50%; სიმაღლე: 30%; ზღვარი: ავტო; )
ამ მეთოდის მიღმა არის ჩადგმული ელემენტის გაჭიმვა მშობელი ელემენტის ოთხივე საზღვარზე ზედა, ქვედა, მარჯვენა და მარცხენა თვისებების 0-ზე დაყენებით.
მინდვრების ავტომატური გენერირებისთვის ყველა მხრიდან დაყენება დააყენებს თანაბარ მნიშვნელობებს ოთხივე მხარეს და ცენტრალიზდება ჩვენს ჩადგმულ div ელემენტზე მის მთავარ ელემენტზე.
სამწუხაროდ, ეს მეთოდი არ მუშაობს IE7 და ქვემოთ.
თანაბარი სივრცეები ზემოთ და ქვემოთ
ამ მეთოდით, თანაბარი შიგთავსი აშკარად არის დაყენებული მშობლის ელემენტის ზემოთ და ქვემოთ.
HTML:
CSS:
#მშობელი (შეფუთვა: 5% 0; ) #ბავშვი (შეფუთვა: 10% 0; )
მაგალითი CSS კოდი ადგენს ზედა და ქვედა ბალიშებს ორივე ელემენტისთვის. ჩადგმული ელემენტისთვის, ბალიშის დაყენება ემსახურება მის ვერტიკალურად ცენტრს. და მშობელი ელემენტის შიგთავსი მოათავსებს მის შიგნით ჩადგმულ ელემენტს.
ამისთვის დინამიური ცვლილებაელემენტების ზომებისთვის გამოიყენება საზომი ფარდობითი ერთეულები. და საზომი აბსოლუტური ერთეულებისთვის მოგიწევთ გამოთვლების გაკეთება.
მაგალითად, თუ ძირითადი ელემენტის სიმაღლეა 400 პიქსელი, ხოლო ჩადგმული ელემენტი არის 100 პიქსელი, მაშინ საჭიროა 150 პიქსელი ბალიშის ზედა და ქვედა ნაწილში.
150 + 150 + 100 = 400
%-ის გამოყენება საშუალებას გაძლევთ დატოვოთ გამოთვლები ბრაუზერს.
ეს მეთოდი ყველგან მუშაობს. Ქვედა მხარეარის გამოთვლების საჭიროება.
Შენიშვნა:ეს მეთოდი მუშაობს ელემენტის გარე ბალიშის დაყენებით. თქვენ ასევე შეგიძლიათ გამოიყენოთ მინდვრები ელემენტის შიგნით. მინდვრების ან ბალიშების გამოყენების გადაწყვეტილება უნდა იქნას მიღებული პროექტის სპეციფიკიდან გამომდინარე.
მცურავი დივ
ეს მეთოდი იყენებს ცარიელ div ელემენტს, რომელიც ცურავს და ხელს უწყობს დოკუმენტში ჩვენი ჩადგმული ელემენტის პოზიციის კონტროლს. გაითვალისწინეთ, რომ მცურავი div მოთავსებულია HTML კოდში ჩვენი ჩადგმული ელემენტის წინ.
HTML:
CSS:
#მშობელი (სიმაღლე: 250 პიქსელი;) #მცურავი ( ათწილადი: მარცხნივ; სიმაღლე: 50%; სიგანე: 100%; ზღვარი-ქვედა: -50 პიქსელი; ) #ბავშვი ( ნათელი: ორივე; სიმაღლე: 100 პიქსელი; )
ჩვენ ოფსეტურია ცარიელი div მარცხნივ ან მარჯვნივ და დავაყენეთ მისი სიმაღლე მისი მთავარი ელემენტის 50%. ამ გზით ის შეავსებს მშობელი ელემენტის ზედა ნახევარს.
ვინაიდან ეს div მცურავია, ის ამოღებულია დოკუმენტის ნორმალური ნაკადიდან და ჩვენ გვჭირდება ტექსტის ამოღება ჩადგმულ ელემენტზე. მაგალითში გამოყენებულია clear: ორივე, მაგრამ სრულიად საკმარისია გამოიყენოთ იგივე მიმართულება, როგორც მცურავი ცარიელი div ელემენტის ოფსეტური.
ჩადგმული div ელემენტის ზედა საზღვარი პირდაპირ არის ცარიელი div ელემენტის ქვედა საზღვრის ქვემოთ. ჩვენ უნდა ავწიოთ ჩადგმული ელემენტი მცურავი ცარიელი ელემენტის სიმაღლის ნახევარით ზემოთ. პრობლემის გადასაჭრელად გამოიყენეთ უარყოფითი margin-bottom თვისების მნიშვნელობა მცურავი ცარიელი div ელემენტისთვის.
ეს მეთოდი ასევე მუშაობს ყველა ბრაუზერში. თუმცა, მისი გამოყენება მოითხოვს დამატებით ცარიელ div ელემენტს და ცოდნას წყობილი ელემენტის სიმაღლის შესახებ.
დასკვნა
ყველა აღწერილი მეთოდი მარტივი გამოსაყენებელია. სირთულე ის არის, რომ არცერთი მათგანი არ არის შესაფერისი ყველა შემთხვევისთვის. თქვენ უნდა გააანალიზოთ პროექტი და აირჩიოთ ის, რომელიც საუკეთესოდ შეესაბამება მოთხოვნებს.
ძალიან ხშირად ამოცანაა ბლოკის გასწორება გვერდის/ეკრანის ცენტრში და თუნდაც ისე, რომ Java სკრიპტის გარეშე, მკაცრი ზომების დაყენების ან უარყოფითი შეწევის გარეშე, და ისე, რომ გადახვევის ზოლები მუშაობდეს მშობელზე, თუ ბლოკი აჭარბებს მის ზომას. . ინტერნეტში საკმაოდ ბევრი მონოტონური მაგალითია იმის შესახებ, თუ როგორ გავასწოროთ ბლოკი ეკრანის ცენტრში. როგორც წესი, მათი უმრავლესობა ეფუძნება იმავე პრინციპებს.
ქვემოთ მოცემულია პრობლემის გადაჭრის ძირითადი გზები, მათი დადებითი და უარყოფითი მხარეები. მაგალითების არსის გასაგებად, გირჩევთ შეამციროთ Result ფანჯრის სიმაღლე/სიგანე მაგალითებში მოცემულ ბმულებზე.
ვარიანტი 1: უარყოფითი შეწევა.
პოზიციონირება ბლოკიზედა და მარცხენა ატრიბუტების გამოყენებით 50%-ით და წინასწარ იცოდეთ ბლოკის სიმაღლე და სიგანე, დააყენეთ უარყოფითი ზღვარი, რომელიც უდრის ზომის ნახევარს. ბლოკი. ამ ვარიანტის დიდი მინუსი არის ის, რომ თქვენ უნდა დათვალოთ უარყოფითი შეწევა. ასევე ბლოკიარ იქცევა საკმაოდ სწორად, როდესაც გარშემორტყმულია გადახვევის ზოლებით - ის უბრალოდ მოწყვეტილია, რადგან მას აქვს უარყოფითი მინდვრები.
მშობელი ( სიგანე: 100%; სიმაღლე: 100%; პოზიცია: აბსოლუტური; ზევით: 0; მარცხნივ: 0; გადინება: ავტო; ) .ბლოკი ( სიგანე: 250 პიქსელი; სიმაღლე: 250 პიქსელი; პოზიცია: აბსოლუტური; ზედა: 50%; მარცხნივ : 50%; ზღვარი: -125 პიქსელი 0 0 -125 პიქსელი; img (მაქსიმალური სიგანე: 100%; სიმაღლე: ავტომატური; ეკრანი: ბლოკი; ზღვარი: 0 ავტომატური; საზღვარი: არცერთი; ) )
ვარიანტი 2. ავტომატური ჩაღრმავება.
ნაკლებად გავრცელებული, მაგრამ მსგავსი პირველი. ამისთვის ბლოკიჩვენ დავაყენეთ სიგანე და სიმაღლე, განვათავსეთ ატრიბუტები ზედა მარჯვენა ქვედა მარცხნივ 0-ზე და დავაყენეთ margin auto. ამ ვარიანტის უპირატესობა არის სამუშაო გადახვევის ზოლები მშობელი, თუ ამ უკანასკნელს აქვს 100% სიგანე და სიმაღლე. ამ მეთოდის მინუსი არის ზომების მკაცრი დაყენება.
მშობელი ( სიგანე: 100%; სიმაღლე: 100%; პოზიცია: აბსოლუტური; ზევით: 0; მარცხნივ: 0; გადინება: ავტო; ) .ბლოკი ( სიგანე: 250 პიქსელი; სიმაღლე: 250 პიქსელი; პოზიცია: აბსოლუტური; ზევით: 0; მარჯვნივ: 0; ქვედა: 0; მარცხნივ: 0; ზღვარი: ავტომატური; img (მაქსიმალური სიგანე: 100%; სიმაღლე: ავტომატური; ჩვენება: ბლოკი; ზღვარი: 0 ავტომატური; საზღვარი: არცერთი; ) )
ვარიანტი 3. ცხრილი.
Მოდი ვიკითხოთ მშობელიცხრილის სტილები, უჯრედი მშობელიდააყენეთ ტექსტის გასწორება ცენტრში. ა ბლოკიჩვენ დავაყენეთ ხაზის ბლოკის მოდელი. მინუსები, რომლებსაც ვიღებთ, არის არასამუშაო გადახვევის ზოლები და ზოგადად, ცხრილის „ემულაციის“ ესთეტიკა არ არის.
მშობელი ( სიგანე: 100%; სიმაღლე: 100%; ჩვენება: ცხრილი; პოზიცია: აბსოლუტური; ზედა: 0; მარცხნივ: 0; > .შიდა ( ჩვენება: ცხრილის უჯრედი; ტექსტის გასწორება: ცენტრში; ვერტიკალური გასწორება: შუა; ) ) .block ( ჩვენება: inline-block; img (ჩვენება: ბლოკი; საზღვარი: არცერთი; ))
ამ მაგალითზე გადახვევის დასამატებლად, დიზაინს კიდევ ერთი ელემენტის დამატება მოგიწევთ.
მაგალითი: jsfiddle.net/serdidg/fk5nqh52/3.
ვარიანტი 4. ფსევდოელემენტი.
ეს ვარიანტი მოკლებულია წინა მეთოდებში ჩამოთვლილ ყველა პრობლემას და ასევე აგვარებს თავდაპირველ პრობლემებს. საქმე იმაშია რომ მშობელიდააყენეთ სტილები ფსევდო ელემენტიადრე, კერძოდ, 100% სიმაღლე, ცენტრის გასწორება და ბლოკის მოდელი. იგივეა ბლოკიდაყენებულია ხაზის ბლოკის მოდელი, ცენტრში. რომ ბლოკიარ "ჩავარდა" ქვეშ ფსევდო ელემენტი, როდესაც პირველის ზომები აღემატება მშობელი, მიუთითეთ მშობელითეთრი სივრცე: nowrap და შრიფტის ზომა: 0, რის შემდეგაც ბლოკიგააუქმეთ ეს სტილები შემდეგით - თეთრი სივრცე: ნორმალური. IN ამ მაგალითშიშრიფტის ზომა: 0 საჭიროა, რომ ამოიღოთ მიღებული სივრცე მშობელიდა ბლოკიკოდის ფორმატირების გამო. სივრცის ამოღება შესაძლებელია სხვა გზით, მაგრამ მიჩნეულია, რომ უმჯობესია უბრალოდ თავიდან აიცილოთ იგი.
მშობელი (სიგანე: 100%; სიმაღლე: 100%, პოზიცია: აბსოლუტური; ზევით: 0; მარცხნივ: 0; გადინება: ავტო; თეთრი სივრცე: nowrap; ტექსტის გასწორება: ცენტრში; შრიფტის ზომა: 0; &: ადრე ( სიმაღლე: 100%; ჩვენება: inline-ბლოკი; ვერტიკალური გასწორება: შუა; შინაარსი: ""; ) .block ( ჩვენება: inline-block; თეთრი სივრცე: ნორმალური; ვერტიკალური გასწორება: შუა; ტექსტის გასწორება: მარცხნივ; img (ჩვენება: ბლოკი; საზღვარი: არცერთი; ) )
ან, თუ მშობელმა უნდა დაიკავოს მხოლოდ ფანჯრის სიმაღლე და სიგანე და არა მთელი გვერდი:
მშობელი ( პოზიცია: ფიქსირებული; ზევით: 0; მარჯვნივ: 0; ქვედა: 0; მარცხნივ: 0; გადინება: ავტო; თეთრი სივრცე: nowrap; ტექსტის გასწორება: ცენტრში; შრიფტის ზომა: 0; &: ადრე ( სიმაღლე: 100%; ჩვენება: inline-ბლოკი; ვერტიკალური გასწორება: შუა; შინაარსი: ""; ) .block ( ჩვენება: inline-block; თეთრი სივრცე: ნორმალური; ვერტიკალური გასწორება: შუა; ტექსტის გასწორება: მარცხნივ; img ( ჩვენება: ბლოკი; საზღვარი: არცერთი; ))
ვარიანტი 5. Flexbox.
ერთ-ერთი ყველაზე მარტივი და ელეგანტური გზაა flexbox-ის გამოყენება. ის არ საჭიროებს სხეულის ზედმეტ მოძრაობებს, საკმაოდ ნათლად აღწერს იმის არსს, რაც ხდება და არის ძალიან მოქნილი. ერთადერთი, რაც უნდა გვახსოვდეს ამ მეთოდის არჩევისას, არის IE-ს მხარდაჭერა მე-10 ვერსიის ჩათვლით. caniuse.com/#feat=flexbox
მშობელი (სიგანე: 100%; სიმაღლე: 100%; პოზიცია: ფიქსირებული; ზედა: 0; მარცხნივ: 0; ჩვენება: მოქნილი; გასწორება-პუნქტები: ცენტრი; გასწორება-შიგთავსი: ცენტრი; დასაბუთებული-შიგთავსი: ცენტრი; გადინება: ავტო; ) .block (ფონი: #60a839; img (ჩვენება: დაბლოკვა; საზღვარი: არცერთი; ))
ვარიანტი 6. ტრანსფორმაცია.
ვარგისია, თუ სტრუქტურით შეზღუდულები ვართ და არ არსებობს მშობელი ელემენტის მანიპულირების საშუალება, მაგრამ ბლოკი როგორმე უნდა იყოს გასწორებული. css ფუნქცია translate() მოვა სამაშველოში. 50% აბსოლუტური პოზიციონირების მნიშვნელობა მოათავსებს ბლოკის ზედა მარცხენა კუთხეს ზუსტად ცენტრში, შემდეგ უარყოფითი გადათარგმნის მნიშვნელობა გადააადგილებს ბლოკს საკუთარ ზომებთან შედარებით. გთხოვთ გაითვალისწინოთ, რომ უარყოფითი ეფექტები შეიძლება გამოჩნდეს ბუნდოვანი კიდეების ან შრიფტის სტილის სახით. ასევე, ამ მეთოდმა შეიძლება გამოიწვიოს პრობლემები java-script-ის გამოყენებით ბლოკის პოზიციის გამოთვლასთან დაკავშირებით. ზოგჯერ CSS მარცხენა თვისების გამოყენების გამო სიგანის 50%-ის დაკარგვის კომპენსირება, ბლოკისთვის მითითებულ წესს შეუძლია. დახმარება: margin-right: -50%; .
მშობელი ( სიგანე: 100%; სიმაღლე: 100%; პოზიცია: ფიქსირებული; ზევით: 0; მარცხნივ: 0; გადინება: ავტო; ) .ბლოკი (პოზიცია: აბსოლუტური; ზედა: 50%; მარცხნივ: 50%; ტრანსფორმაცია: თარგმნა( -50%, -50%); img ( ჩვენება: ბლოკი; ) )
ვარიანტი 7. ღილაკი.
მომხმარებლის ვარიანტი სად ბლოკიჩარჩოში ჩასმული ღილაკის ტეგში. ღილაკს აქვს თვისება, მოახდინოს ყველაფრის ცენტრირება, რაც მასშია, კერძოდ, inline და block-line (inline-block) მოდელის ელემენტები. პრაქტიკაში არ გირჩევთ მის გამოყენებას.
მშობელი ( სიგანე: 100%; სიმაღლე: 100%; პოზიცია: აბსოლუტური; ზევით: 0; მარცხნივ: 0; გადინება: ავტო; ფონი: არცერთი; საზღვარი: არცერთი; მონახაზი: არცერთი; ) .block (ჩვენება: inline-block; img (ჩვენება: ბლოკი;; საზღვარი: არცერთი; ) )
ბონუსი
მე-4 ვარიანტის იდეის გამოყენებით, შეგიძლიათ დააყენოთ გარე მინდვრები ბლოკი, და ეს უკანასკნელი ადეკვატურად იქნება ნაჩვენები გადახვევის ზოლებით გარშემორტყმული.მაგალითი: jsfiddle.net/serdidg/nfqg9rza/2.
თქვენ ასევე შეგიძლიათ სურათის გასწორება ცენტრში და თუ სურათი უფრო დიდია მშობელი, გააფართოვეთ იგი ზომაზე მშობელი.
მაგალითი: jsfiddle.net/serdidg/nfqg9rza/3.
მაგალითი დიდი სურათით:
ვებ დიზაინერები ყოველდღიურად იყენებენ DIV-ებს თავიანთ საქმიანობაში. ყოველგვარი შეფასების გარეშე, ეს არის ყველაზე პოპულარული ტეგი. გახსენით ნებისმიერი ვებსაიტის წყარო და დაინახავთ, რომ ობიექტების უმეტესობა, თუ არა ორი მესამედი, არის ჩასმული
რა არის DIV
ელემენტის სახელი მომდინარეობს ინგლისური სიტყვაგაყოფა, რაც ნიშნავს გაყოფას. მარკირების წერისას ის გამოიყენება ელემენტების ბლოკებად დასაშლელად. DIV-ები აერთიანებს შინაარსის ჯგუფებს ვებ გვერდზე. მაგალითად, სურათები, აბზაცები ტექსტით. ტეგი არანაირად არ მოქმედებს შინაარსის ჩვენებაზე და არ ატარებს რაიმე სემანტიკურ დატვირთვას.
DIV მხარს უჭერს ყველა გლობალურ ატრიბუტს. მაგრამ ვებ დიზაინისთვის საჭიროა მხოლოდ ორი - კლასი და ID. ყველა დანარჩენს მხოლოდ ეგზოტიკურ შემთხვევებში გემახსოვრებათ და ეს ფაქტი არ არის. align ატრიბუტი, რომელიც ადრე გამოიყენებოდა div-ების ცენტრში ან მარცხნივ გასწორებისთვის, მოძველებულია.
როდის გამოვიყენოთ DIV-ები
წარმოიდგინეთ, რომ საიტი არის მაცივარი, ხოლო DIVs არის პლასტმასის კონტეინერები, რომლებშიც საჭიროა შინაარსის დახარისხება. ლივერვურსტთან ერთსა და იმავე კონტეინერში ხილს არ ჩადებდით. თითოეული ტიპის პროდუქტს ცალკე მოათავსებთ. ვებ-კონტენტი იქმნება ანალოგიურად.
გახსენით ნებისმიერი ვებსაიტი და დაყავით იგი მნიშვნელოვან ბლოკებად. სათაური ზევით, ქვედა კოლონტიტული ქვედა ნაწილში, ძირითადი ტექსტი ცენტრში. გვერდზე, როგორც წესი, არის უფრო პატარა სვეტი სარეკლამო შინაარსით ან ტეგის ღრუბელი.
ახლა შეხედეთ თითოეულ განყოფილებას უფრო დეტალურად. დაიწყეთ სათაურით. საიტის სათაურს აქვს ცალკე ლოგო, ნავიგაცია, პირველი დონის სათაური და ზოგჯერ სლოგანი. თითოეულ სემანტიკურ ბლოკს მიანიჭეთ საკუთარი კონტეინერი. ეს არა მხოლოდ გამოყოფს ნაკადში არსებულ ელემენტებს, არამედ გაადვილებს მათ ფორმატირებას. თქვენ გაგიადვილდებათ ობიექტის ცენტრირება DIV ტეგში, მას კლასის ან ID-ის მინიჭებით.
DIV-ების ცენტრირება მინდვრების გამოყენებით
ვებ ელემენტების რენდერისას ბრაუზერი ითვალისწინებს სამ თვისებას: padding, marging და border. padding არის სივრცე შინაარსსა და მის საზღვრებს შორის. ზღვარი - ველები, რომლებიც გამოყოფენ ერთ ობიექტს მეორისგან. საზღვარი არის ხაზები ბლოკების გასწვრივ. ისინი შეიძლება დაინიშნოს ყველა მათგანს ერთდროულად ან მხოლოდ ერთ მხარეს:
div( საზღვარი: 1px მყარი #333; მარცხნივ საზღვარი: არცერთი; )ეს თვისებები ამატებს სივრცეს ობიექტებს შორის და გეხმარებათ მათ სწორად გასწორებაში და განთავსებაში. მაგალითად, თუ გამოსახულების მქონე ბლოკი მარცხენა კიდიდან ცენტრში 20%-ით უნდა გადაიტანოს, თქვენ ელემენტს ანიჭებთ მნიშვნელობას მარცხენა ზღვარზე 20%-ით:
Block-with-img (ზღვარი-მარცხნივ: 20%;)
ელემენტების ფორმატირება შესაძლებელია მათი სიგანის მნიშვნელობებისა და უარყოფითი ბალიშების გამოყენებით. მაგალითად, არის ბლოკი, რომლის ზომებია 200 პიქსელი 200 პიქსელი. ჯერ მივცეთ მას აბსოლუტური პოზიცია და გადავიტანოთ ცენტრში 50%-ით.
Div (პოზიცია: აბსოლუტური; მარცხნივ: 50%; )
ახლა, იმის უზრუნველსაყოფად, რომ ცენტრირებული DIV იდეალურად არის განლაგებული, ჩვენ მას მარცხნივ ვაძლევთ უარყოფით ზღვარს, რომელიც უდრის მისი სიგანის 50%-ს, ანუ -100 პიქსელს:
ზღვარი-მარცხნივ: -100px;
CSS-ში ამას ეწოდება "ჰაერის მოცილება". მაგრამ მას აქვს მნიშვნელოვანი ნაკლი წარმოების საჭიროებაში მუდმივი დასახლებები, რისი გაკეთებაც საკმაოდ რთულია რამდენიმე დონის ბუდობის მქონე ელემენტებისთვის. თუ მითითებულია შიგთავსის და საზღვრის სიგანის მნიშვნელობები, ბრაუზერი ნაგულისხმევად გამოთვლის კონტეინერის ზომებს, როგორც საზღვრების სისქის ჯამს, ბალიშს მარჯვნივ და მარცხნივ და თავად შინაარსს, რაც შეიძლება ასევე მოულოდნელი.
ასე რომ, როდესაც გჭირდებათ DIV-ის ცენტრირება, გამოიყენეთ box-sizing თვისება მნიშვნელობით border-box. ეს ხელს შეუშლის ბრაუზერს დამატებები და საზღვრების მნიშვნელობები DIV ელემენტის საერთო სიგანეზე. ელემენტის ასამაღლებლად ან დასაწევად, ასევე გამოიყენეთ უარყოფითი მნიშვნელობები. მაგრამ ამ შემთხვევაში, ისინი შეიძლება მიეკუთვნებოდეს კონტეინერის ზედა ან ქვედა ველს.
როგორ გავაერთიანოთ DIV ბლოკი ავტომატური მინდვრების გამოყენებით
ეს არის მარტივი გზა დიდი ბლოკების ცენტრისთვის. თქვენ უბრალოდ ანიჭებთ კონტეინერის სიგანეს და margin თვისებას ავტოს. ბრაუზერი მოათავსებს ბლოკს შუაში თანაბარი მინდვრებით მარცხნივ და მარჯვნივ, რომელიც თავად ასრულებს ყველა სამუშაოს. შედეგად, თქვენ არ რისკავთ დაბნეულობას მათემატიკური გამოთვლებში და მნიშვნელოვნად დაზოგავთ თქვენს დროს.
გამოიყენეთ ავტომატური ველის მეთოდი საპასუხო აპების შემუშავებისას. მთავარია კონტეინერს სიგანის მნიშვნელობა მიანიჭოთ em ან პროცენტულად. ზემოთ მოყვანილი კოდის მაგალითი DIV-ს ცენტრალიზდება ნებისმიერ მოწყობილობაზე, მათ შორის Მობილური ტელეფონები, ის დაიკავებს ეკრანის 90%-ს.
გასწორება ჩვენების თვისებით: inline-block
ნაგულისხმევად, DIV ელემენტები განიხილება ბლოკის ელემენტებად და მათი ჩვენების მნიშვნელობა არის ბლოკი. ამ მეთოდისთვის თქვენ დაგჭირდებათ ამ თვისების გადალახვა. შესაფერისია მხოლოდ DIV-ებისთვის, რომლებსაც აქვთ მშობელი კონტეინერი:
ელემენტს outer-div კლასით ენიჭება ტექსტის გასწორების თვისება ცენტრის მნიშვნელობით, რომელიც ცენტრებს ტექსტს შიგნით. მაგრამ ამჟამად ბრაუზერი ხედავს ჩადგმულ DIV-ს, როგორც ბლოკის ობიექტს. ტექსტის გასწორების თვისებამ რომ იმუშაოს, inner-div უნდა განიხილებოდეს როგორც პატარა. ასე რომ, შიდა-div სელექტორის CSS ცხრილში თქვენ წერთ შემდეგ კოდს:
Inner-div (ჩვენება: inline-block;)
თქვენ ცვლით ჩვენების თვისებას ბლოკიდან inline-block-ზე.
ტრანსფორმაციის/თარგმნის მეთოდი
კასკადური სტილის ფურცლები შესაძლებელს ხდის ვებ ელემენტების გადაადგილებას, დახრილობას, როტაციას და სხვაგვარად გარდაქმნას. ტრანსფორმაციის თვისება გამოიყენება ამისთვის. მნიშვნელობები მიუთითებს სასურველ ტრანსფორმაციის ტიპსა და ხარისხზე. ამ მაგალითში ჩვენ ვიმუშავებთ თარგმანთან:
transform: translate(50%, 50%);Translate ფუნქცია ელემენტს გადააქვს მისი ამჟამინდელი პოზიციიდან მარცხნივ/მარჯვნივ და ზევით/ქვემოთ. ორი მნიშვნელობა გადადის ფრჩხილებში:
- ჰორიზონტალური მოძრაობის ხარისხი;
- ვერტიკალური მოძრაობის ხარისხი.
თუ ელემენტს მხოლოდ ერთი კოორდინატთა ღერძის გასწვრივ სჭირდება გადაადგილება, მაშინ სიტყვის თარგმნის შემდეგ მიუთითებთ ღერძის სახელს და ფრჩხილებში საჭირო გადაადგილების რაოდენობას:
ტრანსფორმაცია: translateY(-20%);
ზოგიერთ სახელმძღვანელოში შეგიძლიათ იპოვოთ ტრანსფორმაცია გამყიდველის პრეფიქსებით:
Webkit-transform: translate(50%, 50%); -ms-transform: translate(50%, 50%); transform: translate(50%, 50%);
2018 წელს ეს აღარ არის საჭირო; ქონებას მხარს უჭერს ყველა ბრაუზერი, მათ შორის Edge და IE.
იმისათვის, რომ ჩვენ გვსურს DIV-ის ცენტრში მოვათავსოთ, CSS translate ფუნქცია იწერება 50% მნიშვნელობით ვერტიკალური და ჰორიზონტალური ღერძისთვის. ეს გამოიწვევს ბრაუზერის ელემენტს მისი ამჟამინდელი პოზიციიდან მისი სიგანისა და სიმაღლის ნახევარით. სიგანისა და სიმაღლის თვისებები უნდა იყოს მითითებული:
გაითვალისწინეთ, რომ ელემენტი, რომელზედაც გამოიყენება ტრანსფორმაციის თვისება, მოძრაობს მის გარშემო არსებული ობიექტებისგან დამოუკიდებლად. ერთის მხრივ, ეს მოსახერხებელია, მაგრამ ზოგჯერ გადაადგილებით, DIV შეიძლება გადაფაროს სხვა კონტეინერი. ამიტომ, ვებ კომპონენტების ცენტრირების ეს მეთოდი ითვლება არასტანდარტულად და გამოიყენება მხოლოდ უკიდურესი აუცილებლობის შემთხვევაში. ყველა CSS კანონის მიხედვით ტრანსფორმაციები გამოიყენება ანიმაციისთვის.
Flexbox განლაგებით მუშაობა
Flexbox ითვლება ვებ განლაგების დიზაინის დახვეწილ გზად. მაგრამ თუ დაეუფლებით, მიხვდებით, რომ ეს ბევრად უფრო მარტივი და სასიამოვნოა, ვიდრე სტანდარტული გზებიფორმატირება. Flexbox სპეციფიკაცია არის მოქნილი და წარმოუდგენლად ძლიერი გზაელემენტის დამუშავება. თან ინგლისურადმოდულის სახელი ითარგმნება როგორც "მოქნილი კონტეინერი". ელემენტების სიგანის, სიმაღლისა და განლაგების მნიშვნელობები რეგულირდება ავტომატურად, შეწევისა და მინდვრების გაანგარიშების გარეშე.
წინა მაგალითებში ჩვენ უკვე ვმუშაობდით ჩვენების თვისებებთან, მაგრამ დავაყენეთ ის დაბლოკვის და inline-block მნიშვნელობებზე. მოქნილი განლაგების შესაქმნელად ჩვენ გამოვიყენებთ ეკრანს: flex. პირველ რიგში, ჩვენ გვჭირდება მოქნილი კონტეინერი:
კასკადურ ცხრილებში მოქნილ კონტეინერში გადასაყვანად ჩვენ ვწერთ:
Flex-container (ჩვენება: flex;)
ყველა ჩადგმული ობიექტი, მაგრამ მხოლოდ პირდაპირი შთამომავლები, იქნება მოქნილი ელემენტები:
თუ სიას მოათავსებთ flex კონტეინერში, მაშინ li list ელემენტები არ განიხილება flex ელემენტებად. Flexbox განლაგება იმუშავებს მხოლოდ ul-ზე:
მოქნილი ელემენტების განთავსების წესები
მოქნილი ელემენტების სამართავად, საჭიროა justify-content და align-items. თქვენ მიერ მითითებული მნიშვნელობებიდან გამომდინარე, ეს ორი თვისება ავტომატურად განათავსებს ობიექტებს საჭიროებისამებრ. თუ ჩვენ გვჭირდება ყველა ჩადგმული DIV-ის ცენტრირება, ვწერთ justify-content: center, align-items: center და სხვა არაფერი. ბრაუზერი თავად გააკეთებს დანარჩენ სამუშაოს:
ტექსტის დასაყენებლად DIV-ებზე, რომლებიც მოქნილი ელემენტია, შეგიძლიათ გამოიყენოთ ტექსტის გასწორების სტანდარტული ტექნიკა. ან შეგიძლიათ თითოეული ჩასმული DIV ასევე გახადოთ მოქნილი კონტეინერი და მართოთ შინაარსი justify-content-ის გამოყენებით. ეს მეთოდი ბევრად უფრო რაციონალურია, თუ ის შეიცავს მრავალფეროვან შინაარსს, მათ შორის გრაფიკას, სხვა ჩადგმულ ობიექტებს, მათ შორის მრავალ დონის სიებს.
განლაგების ყველა დიზაინერს მუდმივად ემუქრება შინაარსის ბლოკში გასწორების აუცილებლობა: ჰორიზონტალურად ან ვერტიკალურად. არსებობს რამდენიმე კარგი სტატია ამ თემაზე, მაგრამ ყველა გვთავაზობს ბევრ საინტერესოს, მაგრამ ცოტას პრაქტიკული ვარიანტები, რის გამოც ზედმეტი დრო უნდა დახარჯო მთავარის ხაზგასასმელად. გადავწყვიტე ეს ინფორმაცია ჩემთვის მოსახერხებელი სახით წარმომედგინა, რომ აღარ დავგუგლო.
ბლოკების გასწორება ცნობილი ზომებით
CSS-ის გამოყენების უმარტივესი გზაა ბლოკების გასწორება, რომლებსაც აქვთ ცნობილი სიმაღლე (ვერტიკალური გასწორებისთვის) ან სიგანე (ჰორიზონტალური გასწორებისთვის).
გასწორება ბალიშის გამოყენებით
ზოგჯერ თქვენ არ შეგიძლიათ ელემენტის ცენტრირება, მაგრამ დაამატეთ მას საზღვრები ""-ის გამოყენებით. padding".
მაგალითად, არის სურათი 200 x 200 პიქსელი, და თქვენ უნდა მოათავსოთ ის ბლოკში 240 x 300. ჩვენ შეგვიძლია დავაყენოთ გარე ბლოკის სიმაღლე და სიგანე = 200 px და დავამატოთ 20 პიქსელი ზედა და ქვედა ნაწილში. , და 50 მარცხნივ და მარჯვნივ.
.example-wrapper1 (ფონი: #535E73; სიგანე: 200px; სიმაღლე: 200px; padding: 20px 50px;)აბსოლუტურად განლაგებული ბლოკების გასწორება
თუ ბლოკი დაყენებულია " პოზიცია: აბსოლუტური", მაშინ ის შეიძლება განთავსდეს მის უახლოეს მშობელთან შედარებით "პოზიციით: ნათესავი". ეს მოითხოვს ყველა თვისებას (" ზედა","უფლება","ქვედა","დატოვა„) შიდა ბლოკის მინიჭება იგივე ღირებულება, ასევე „ზღვარი: ავტო“.
*არის ნიუანსი: შიდა ბლოკის სიგანე (სიმაღლე) + მარცხენა (მარჯვნივ, ქვედა, ზედა) მნიშვნელობა არ უნდა აღემატებოდეს მშობელი ბლოკის ზომებს. უფრო უსაფრთხოა მარცხენა (მარჯვნივ, ქვედა, ზედა) თვისებების მინიჭება 0 (ნული).
.example-wrapper2 (პოზიცია: ფარდობითი; სიმაღლე: 250 პიქსელი; ფონი: url(space.jpg);) .cat-king (სიგანე: 200 პიქსელი; სიმაღლე: 200 პიქსელი; პოზიცია: აბსოლუტური; ზედა: 0; მარცხნივ: 0; ქვედა: 0 ; მარჯვნივ : 0 ; ზღვარი : ავტო ; ფონი : url (king.png) ; )ჰორიზონტალური განლაგება
გასწორება "ტექსტის გასწორება: ცენტრის" გამოყენებით
ბლოკში ტექსტის გასასწორებლად არის სპეციალური თვისება " ტექსტის გასწორება". როცა დაყენებულია" ცენტრი"ტექსტის თითოეული სტრიქონი ჰორიზონტალურად იქნება გასწორებული. მრავალსტრიქონიანი ტექსტისთვის ეს გამოსავალი ძალიან იშვიათად გამოიყენება; უფრო ხშირად ეს ვარიანტი შეიძლება მოიძებნოს სპანების, ბმულების ან სურათების გასწორებისთვის.
ერთხელ მომიწია ტექსტის მოფიქრება, რათა მეჩვენებინა, როგორ მუშაობს ტექსტის გასწორება CSS-ის გამოყენებით, მაგრამ საინტერესო არაფერი მომივიდა თავში. თავიდან გადავწყვიტე სადმე გადამეწერა სანერგე რითმა, მაგრამ გამახსენდა, რომ ამან შეიძლება გააფუჭოს სტატიის უნიკალურობა და ჩვენი ძვირფასო მკითხველი ვერ იპოვის მას Google-ში. და შემდეგ გადავწყვიტე დამეწერა ეს აბზაცი - ბოლოს და ბოლოს, წერტილი მასში არ არის, მაგრამ წერტილი გასწორებულია.
.example-text (text-align: center; padding: 10px; background: #FF90B8;)აღსანიშნავია, რომ ეს თვისება იმუშავებს არა მხოლოდ ტექსტისთვის, არამედ ნებისმიერი შიდა ელემენტისთვის ("ჩვენება: inline").
მაგრამ ეს ტექსტი გასწორებულია მარცხნივ, მაგრამ ის არის ბლოკში, რომელიც ცენტრშია შეფუთვასთან შედარებით.
.example-wrapper3 (text-align: center; background: #FF90B8;) .inline-text (display: inline-block; სიგანე: 40%; padding: 10px; text-align: მარცხნივ; ფონზე: #FFE5E5; )ბლოკების გასწორება ზღვრის გამოყენებით
ცნობილი სიგანის მქონე ბლოკის ელემენტები ადვილად შეიძლება განლაგდეს ჰორიზონტალურად, მათი დაყენებით "ზღვარი-მარცხნივ: ავტო; ზღვარი-მარჯვნივ: ავტო". ჩვეულებრივ გამოიყენება აბრევიატურა: " ზღვარი: 0 ავტო" (ნებისმიერი მნიშვნელობა შეიძლება გამოყენებულ იქნას ნულის ნაცვლად). მაგრამ ეს მეთოდი არ არის შესაფერისი ვერტიკალური გასწორებისთვის.
.lama-wrapper (სიმაღლე: 200 პიქსელი; ფონი: #F1BF88;) .lama1 (სიმაღლე: 200 პიქსელი; სიგანე: 200 პიქსელი; ფონი: url(lama.jpg); ზღვარი: 0 ავტო; )ასე უნდა გაასწოროთ ყველა ბლოკი, სადაც ეს შესაძლებელია (სადაც ფიქსირებული ან აბსოლუტური პოზიციონირება არ არის საჭირო) - ეს არის ყველაზე ლოგიკური და ადეკვატური. მიუხედავად იმისა, რომ ეს აშკარად ჩანს, მე ზოგჯერ მინახავს საშინელი მაგალითები ნეგატიური ჭრილებით, ამიტომ გადავწყვიტე გარკვევა.
ვერტიკალური განლაგება
ვერტიკალური განლაგებით ბევრად მეტი პრობლემა- როგორც ჩანს, ეს არ იყო გათვალისწინებული CSS-ში. სასურველი შედეგის მიღწევის რამდენიმე გზა არსებობს, მაგრამ ყველა მათგანი არც თუ ისე ლამაზია.
გასწორება ხაზის სიმაღლის თვისებასთან
იმ შემთხვევაში, როდესაც ბლოკში მხოლოდ ერთი ხაზია, შეგიძლიათ მიაღწიოთ მის ვერტიკალურ გასწორებას ""-ის გამოყენებით. ხაზის სიმაღლე" და დააყენეთ სასურველ სიმაღლეზე. საიმედოობისთვის ღირს ასევე "სიმაღლის" დაყენება, რომლის მნიშვნელობა ტოლი იქნება "ხაზის სიმაღლე", რადგან ეს უკანასკნელი არ არის მხარდაჭერილი ყველა ბრაუზერში.
.example-wrapper4 (ხაზის სიმაღლე: 100 პიქსელი; ფერი: #DC09C0; ფონი: #E5DAE1; სიმაღლე: 100 პიქსელი; ტექსტის გასწორება: ცენტრში; )ასევე შესაძლებელია ბლოკის გასწორების მიღწევა რამდენიმე ხაზით. ამისათვის თქვენ მოგიწევთ გამოიყენოთ დამატებითი სახვევის ბლოკი და დააყენოთ მასზე ხაზის სიმაღლე. შიდა ბლოკი შეიძლება იყოს მრავალ ხაზოვანი, მაგრამ უნდა იყოს "შიდა". თქვენ უნდა მიმართოთ მასზე "ვერტიკალური გასწორება: შუა".
.example-wrapper5 (ხაზის სიმაღლე: 160 პიქსელი; სიმაღლე: 160 პიქსელი; შრიფტის ზომა: 0; ფონი: #FF9B00;) .example-wrapper5 .text1 (ჩვენება: inline-block; შრიფტის ზომა: 4 ხაზი 1.5; ვერტიკალური გასწორება: შუა; ფონი: #FFFAF2; ფერი: #FF9B00; ტექსტის გასწორება: ცენტრში;)შეფუთვის ბლოკს უნდა ჰქონდეს კომპლექტი "შრიფტის ზომა: 0". თუ შრიფტის ზომას არ დააყენებთ ნულზე, ბრაუზერი დაამატებს რამდენიმე დამატებით პიქსელს. თქვენ ასევე მოგიწევთ მიუთითოთ შრიფტის ზომა და ხაზის სიმაღლე შიდა ბლოკისთვის, რადგან ეს თვისებები მემკვიდრეობით არის მიღებული მშობლისგან.
ვერტიკალური გასწორება ცხრილებში
საკუთრება " ვერტიკალური გასწორება" ასევე მოქმედებს ცხრილის უჯრედებზე. მნიშვნელობით დაყენებულია "შუა", შიგთავსი უჯრედის შიგნით არის გასწორებული ცენტრთან. რა თქმა უნდა, ცხრილის განლაგება დღეს არქაულად ითვლება, მაგრამ გამონაკლის შემთხვევებში მისი სიმულაცია შეგიძლიათ მიუთითოთ "" ჩვენება: ცხრილის უჯრედი".
მე ჩვეულებრივ ვიყენებ ამ ვარიანტს ვერტიკალური გასწორებისთვის. ქვემოთ მოცემულია დასრულებული პროექტიდან აღებული განლაგების მაგალითი. ეს არის სურათი, რომელიც ვერტიკალურად არის კონცენტრირებული ამ გზით, რაც საინტერესოა.
.one_product .img_wrapper (ჩვენება: ცხრილის უჯრედი; სიმაღლე: 169 პიქსელი; ვერტიკალური გასწორება: შუა; გადინება: დამალული; ფონი: #fff; სიგანე: 255 პიქსელი;) %; მინ-სიგანე: 140 პიქსელი; ეკრანი: ბლოკი; ზღვარი: 0 ავტომატური; )უნდა გვახსოვდეს, რომ თუ ელემენტს აქვს "float" კომპლექტი, გარდა "არცერთი", მაშინ ის ნებისმიერ შემთხვევაში იქნება ბლოკი (ჩვენება: ბლოკი) - მაშინ მოგიწევთ გამოიყენოთ დამატებითი ბლოკის შეფუთვა.
გასწორება დამატებითი შიდა ელემენტით
და შიდა ელემენტებისთვის შეგიძლიათ გამოიყენოთ " ვერტიკალური გასწორება: შუა". უფრო მეტიც, ყველა ელემენტი " ჩვენება: inline"რომლებიც ერთსა და იმავე ხაზზე არიან, გასწორდება საერთო ცენტრალურ ხაზთან.
თქვენ უნდა შექმნათ დამხმარე ბლოკი, რომლის სიმაღლე ტოლია მშობელი ბლოკის სიმაღლეზე, შემდეგ კი სასურველი ბლოკი იქნება ცენტრში. ამისათვის მოსახერხებელია ფსევდო ელემენტების გამოყენება: ადრე ან: შემდეგ.
.example-wrapper6 (სიმაღლე: 300 პიქსელი; ტექსტის გასწორება: ცენტრში; ფონი: #70DAF1;) .pudge (ჩვენება: inline-block; ვერტიკალური გასწორება: შუა; ფონი: url(pudge.png); ფონის ფერი: # fff; სიგანე: 200 პიქსელი; სიმაღლე: 200 პიქსელი;) .riki (ჩვენება: inline-block; სიმაღლე: 100%; ვერტიკალური გასწორება: შუა;)ჩვენება: მოქნილობა და გასწორება
თუ დიდად არ გაინტერესებთ Explorer 8-ის მომხმარებლები, ან იმდენად ზრუნავთ, რომ მზად ხართ მათთვის დამატებითი ჯავასკრიპტის ჩასმა, მაშინ შეგიძლიათ გამოიყენოთ "display: flex". Flex Box-ები შესანიშნავად აგვარებენ გასწორების საკითხებს და უბრალოდ დაწერეთ „ზღვარი: ავტომატური“, რათა კონტენტი შიგნიდან მოაწყოთ.
აქამდე პრაქტიკულად არ შემხვედრია ეს მეთოდი, მაგრამ განსაკუთრებული შეზღუდვები არ არსებობს.
ჰოდა, სულ ამაზე მინდოდა დამეწერა CSS გასწორება. ახლა კონტენტის ცენტრირება პრობლემა არ იქნება!
მაკარონი ტუნასთან ერთად ნაღების სოუსში არის კერძი, რომელიც ნებისმიერს გადაყლაპავს ენას, რა თქმა უნდა, არა მხოლოდ გასართობად, არამედ იმიტომ, რომ ის წარმოუდგენლად გემრიელია. ტუნა და მაკარონი სრულყოფილ ჰარმონიაშია ერთმანეთთან. რა თქმა უნდა, ზოგიერთს შეიძლება არ მოეწონოს ეს კერძი.
|
ამრიგად, თუ თქვენ გიჭირთ კითხვა "რა განსხვავებაა სუშისა და რულონებს შორის?", პასუხი არაფერია. რამდენიმე სიტყვა იმის შესახებ, თუ რა სახის რულონები არსებობს. რულონები სულაც არ არის იაპონური სამზარეულო. რულეტის რეცეპტი ამა თუ იმ ფორმით გვხვდება ბევრ აზიურ სამზარეულოში.
|
გარემოსდაცვითი პრობლემების გადაწყვეტა და, შესაბამისად, ცივილიზაციის მდგრადი განვითარების პერსპექტივები დიდწილად დაკავშირებულია განახლებადი რესურსების კომპეტენტურ გამოყენებასთან და ეკოსისტემების სხვადასხვა ფუნქციებთან და მათ მართვასთან. ეს მიმართულება არის ყველაზე მნიშვნელოვანი გზა მისასვლელად
|
მინიმალური ხელფასი არის მინიმალური ხელფასი (მინიმალური ხელფასი), რომელსაც ყოველწლიურად ამტკიცებს რუსეთის ფედერაციის მთავრობა ფედერალური კანონის "მინიმალური ხელფასის შესახებ" საფუძველზე. მინიმალური ხელფასი გამოითვლება სრულად დამუშავებული ყოველთვიური სამუშაო ნორმისთვის.
|