#ბავშვი (ხაზის სიმაღლე: 200 პიქსელი; )

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

CSS მეთოდი ცხრილის თვისებების გამოყენებით

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

#მშობელი ( ჩვენება: ცხრილი;) #child ( ჩვენება: ცხრილის უჯრედი; ვერტიკალური გასწორება: შუა; )

სამწუხაროდ, ეს მეთოდი არ მუშაობს IE ბრაუზერის ძველ ვერსიებში. თუ გჭირდებათ ბრაუზერის მხარდაჭერა IE6-ისთვის და ქვემოთ, დაამატეთ ეკრანი: inline-block დეკლარაცია ბავშვის ელემენტს.

#child (ჩვენება: inline-block;)

აბსოლუტური პოზიციონირება და უარყოფითი ზღვარი

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

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

#მშობელი (პოზიცია: ნათესავი;) #შვილი (პოზიცია: აბსოლუტური; ზედა: 50%; მარცხნივ: 50%; სიმაღლე: 30%; სიგანე: 50%; ზღვარი: -15% 0 0 -25%; )

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

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

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

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

ბავშვის ელემენტის აბსოლუტური განლაგება

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

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

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

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

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

ქვედა და ზედა მინდვრები თანაბარია

ამ მეთოდით, ჩვენ ცალსახად ვანიჭებთ თანაბარ ბალიშს (ქვედა და ზემოდან) მშობელ ელემენტს, რომელიც ვიზუალურად ამახვილებს ბავშვის ელემენტს ვერტიკალურად.

#მშობელი (შეფუთვა: 5% 0; ) #ბავშვი (შეფუთვა: 10% 0; )

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

მაგალითად, თუ მშობელი ელემენტის სიმაღლეა 400 პიქსელი, ხოლო ბავშვი არის 100 პიქსელი, მაშინ ზედა და ქვედა ბალიშები უნდა დააყენოთ 150 პიქსელზე.

150 + 150 + 100 = 400

მცურავი დივ

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

#მშობელი (სიმაღლე: 250 პიქსელი;) #მცურავი ( ათწილადი: მარცხნივ; სიმაღლე: 50%; სიგანე: 100%; ზღვარი-ქვედა: -50 პიქსელი; ) #ბავშვი ( ნათელი: ორივე; სიმაღლე: 100 პიქსელი; )

ჯერ მარცხნივ (ან მარჯვნივ) გადავაადგილებთ მცურავ ბლოკს და ვაძლევთ მას მშობლის 50%-ის სიმაღლეს. ამ გზით მცურავი ბლოკი შეავსებს მშობელი ელემენტის ზედა ნახევარს.

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

ამჟამად, ბავშვის ელემენტის ზედა კიდე მდებარეობს მცურავი ელემენტის ქვედა კიდის პირდაპირ. ბავშვის ელემენტი უნდა ავწიოთ მცურავი ელემენტის სიმაღლის ნახევარზე. ამისათვის უბრალოდ დააყენეთ მცურავი ბლოკის უარყოფითი ქვედა ზღვარი 50%-მდე.

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

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

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

აქ არის ორი div ელემენტი:

თითოეული მეთოდი გამოყენებული იქნება შიდა ერთეულის გარე განყოფილების ცენტრთან გასასწორებლად.

ხაზის სიმაღლე ერთი ხაზისთვის

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

შეუძლებელი იქნება პროცენტული აღნიშვნის line-height=100% გამოყენება, რადგან 100% ამ შემთხვევაში არის შრიფტის სიმაღლე.

კონტეინერი (
სიმაღლე: 300px;
ხაზის სიმაღლე: 300px;
}

შინაგანი (
თეთრი სივრცე: nowrap;
გადინება: დამალული;
}

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

მაგიდა ვერტიკალური გასწორებით

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

საბაზისო - ნაგულისხმევი;
. ქვედა - შინაარსი უჯრედის ბოლოში;
. შუა — შინაარსი უჯრედის შუაში;
. ზედა — შინაარსი უჯრედის ზედა ნაწილში.

პირველ მაგალითში, ცხრილის ერთი უჯრედი ხდება გარე ბლოკი.

კონტეინერი (
ჩვენება: ცხრილის უჯრედი;
ვერტიკალური გასწორება: შუა;
}

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

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

გარე შესაფუთი (
ჩვენება: მაგიდა;
}

კონტეინერი (
ჩვენება: ცხრილის უჯრედი;
ვერტიკალური გასწორება: შუა;
}

პოზიცია: აბსოლუტური + უარყოფითი ზღვარი

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

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

კონტეინერი (
პოზიცია: ნათესავი;
}

შინაგანი (
სიმაღლე: 140px;
პოზიცია: აბსოლუტური;
ზედა: 50%;
margin-top: -70px;
}

ამ მეთოდის მინუსი არის ბავშვის სიმაღლის ცოდნის აუცილებლობა.

გასწორება ვერტიკალური გასწორების შესაბამისად

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

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

გარე ბლოკისთვის დადგენილია ერთი ხაზის ცენტრირება.

კონტეინერი (
სიმაღლე: 140px;
ხაზის სიმაღლე: 140px;
}

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

შინაგანი (
ჩვენება: inline-block;
ხაზის სიმაღლე: ნორმალური;
ვერტიკალური გასწორება: შუა;
}

ამ მეთოდის მინუსი ის არის, რომ თქვენ უნდა იცოდეთ მშობლის სიმაღლე.

გასწორება ტრანსფორმაციასთან

ტრანსფორმაციის თვისების translateY ფუნქცია საშუალებას გაძლევთ მოაწყოთ უცნობი სიმაღლის შიდა ბლოკი. ამისთვის მშობელი შედარებით უნდა იყოს განლაგებული და ბავშვი აბსოლუტურად.

ზედა თვისება 50% ღირებულებით აქვეითებს შიდა ბლოკს ისე, რომ მისი ზედა კიდე განლაგებულია მისი მშობლის შუაში. translateY მნიშვნელობა: -50% ზრდის ელემენტს საკუთარი სიმაღლის ნახევარზე და ამით ასწორებს ბლოკების ვერტიკალურ ცენტრებს.

კონტეინერი (
პოზიცია: ნათესავი;
}

შინაგანი (
პოზიცია: აბსოლუტური;
ზედა: 50%;
ტრანსფორმაცია: translateY(-50%);
}

ამ ტექნიკის მინუსი არის IE ბრაუზერში ტრანსფორმაციის ფუნქციების შეზღუდული მხარდაჭერა.

გასწორება ფსევდოელემენტის მეშვეობით

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

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

კონტეინერი: ადრე (
შინაარსი: "";
სიმაღლე: 100%;
ვერტიკალური გასწორება: შუა;
ჩვენება: inline-block;
}

შინაგანი (
ჩვენება: inline-block;
ვერტიკალური გასწორება: შუა;
}

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

Flexbox

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

კონტეინერი (
ჩვენება: flex;
სიგანე: 320px;
სიმაღლე: 140px;
}

შინაგანი (
სიგანე: 120px;
ზღვარი: ავტო;
}

Flexbox მუშაობს მხოლოდ თანამედროვე ბრაუზერებში.

მეთოდის არჩევა

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

ელემენტების სიმაღლე უცნობია

ამ სიტუაციაში შეგიძლიათ გამოიყენოთ ოთხი უნივერსალური მეთოდიდან ერთი:

1. მაგიდა. მშობელი ხდება ცხრილის უჯრედი, რომელიც იქმნება HTML-ში ან display-table/display-cell-ის მეშვეობით. ამ ძირითად ელემენტს მოცემულია ვერტიკალური გასწორება: შუა.

2. ფსევდოელემენტი. გარე ბლოკისთვის იქმნება ინლაინ-ბლოკის ფსევდოელემენტი სიგანე=100% და ვერტიკალური გასწორება: შუა. ბავშვს ეძლევა ჩვენება: inline-block და vertical-align: შუა. მეთოდი არ მუშაობს მხოლოდ მაშინ, როდესაც შიდა ბლოკს ეძლევა აბსოლუტური პოზიციონირება.

3. ტრანსფორმაცია. მშობელი იღებს თანამდებობას: ნათესავი. ბავშვს ენიჭება პოზიცია: აბსოლუტური, ზედა: 50% და ტრანსფორმაცია: translateY(-50%);

4. Flexbox. გარე ბლოკი დაყენებულია ჩვენებაზე: flex, შიდა ბლოკი დაყენებულია ზღვარზე: auto.

ცნობილია მხოლოდ ბავშვის სიმაღლე

გარე ერთეული განლაგებულია შედარებით; შიდა ელემენტს ენიჭება აბსოლუტური განლაგება, ზევით: 50% და ზედა ზღვარი მისი სიმაღლის ნახევრის ტოლია.

ერთი ხაზი თითო ბლოკზე ცნობილი სიმაღლით

გარე ბლოკს ენიჭება ხაზის სიმაღლის თვისება მისი სიმაღლის ტოლი მნიშვნელობით.

გარე ბლოკის სიმაღლე ცნობილია, მაგრამ შიდა ელემენტი არა.

მშობელს ეძლევა ხაზის სიმაღლე მისი სიმაღლის ტოლი. ბავშვის ხაზის სიმაღლე ხელახლა არის განსაზღვრული ნორმალურ ან ნებისმიერ სასურველ მნიშვნელობებამდე და მასზე მოცემულია ჩვენება: inline-block და vertical-align: შუა.

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

1. ჰორიზონტალური გასწორება ბლოკის/გვერდის ცენტრში

1.1. თუ ბლოკის სიგანე მითითებულია:

div (სიგანე: 300 პიქსელი; ზღვარი: 0 ავტომატური; /* ელემენტის ჰორიზონტალურად ცენტრირება მშობლის ბლოკში*/ )

თუ გსურთ ხაზოვანი ელემენტის გასწორება ამ გზით, ის უნდა იყოს დაყენებული, რათა გამოჩნდეს: დაბლოკვა;

1.2. თუ ბლოკი ჩასმულია სხვა ბლოკში და მისი სიგანე არ არის მითითებული/დაზუსტებული:

.wrapper(ტექსტის გასწორება: ცენტრში;)

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

.wrapper (პოზიცია: ფარდობითი; /*დააყენეთ ფარდობითი პოზიციონირება მშობელი ბლოკისთვის ისე, რომ შემდეგ ჩვენ შეგვიძლია ბლოკის აბსოლუტურად განთავსება მის შიგნით*/) .box (სიგანე: 400 პიქსელი; პოზიცია: აბსოლუტური; მარცხნივ: 50%; ზღვარი-მარცხნივ: -200px / *გადაიტანეთ ბლოკი მარცხნივ მისი სიგანის ტოლი მანძილით*/ )

1.4. თუ ბლოკებს არ აქვთ მითითებული სიგანე, შეგიძლიათ მათი ცენტრირება მშობელი შეფუთვის ბლოკის გამოყენებით:

.შეფუთვა (ტექსტის გასწორება: ცენტრში; /*ბლოკის შიგთავსის განთავსება ცენტრში*/) .box ( ჩვენება: inline-block; /*ბლოკების რიგზე ჰორიზონტალურად განლაგება*/ margin-right: -0.25em ; /*ამოიღეთ სწორი სივრცე ბლოკებს შორის*/

2. ვერტიკალური გასწორება

2.1. თუ ტექსტი იკავებს ერთ ხაზს, მაგალითად, ღილაკებისა და მენიუს ელემენტებისთვის:

.ღილაკი (სიმაღლე: 50 პიქსელი; ხაზის სიმაღლე: 50 პიქს; )

2.2. ბლოკის ვერტიკალურად გასწორება მშობლის ბლოკში:

.შეფუთვა (პოზიცია: შედარებითი;). ყუთი ( სიმაღლე: 100 პიქსელი; პოზიცია: აბსოლუტური; ზედა: 50%; ზღვარი: -50 პიქსელი 0 0 0; )

2.3. ვერტიკალური გასწორება ცხრილის ტიპის მიხედვით:

.wrapper ( ჩვენება: ცხრილი; სიგანე: 100%; ) .box ( ჩვენება: ცხრილის უჯრედი; სიმაღლე: 100 პიქსელი; ტექსტის გასწორება: ცენტრში; ვერტიკალური გასწორება: შუა; )

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

.შეფუთვა (პოზიცია: ფარდობითი; ) .ყუთი ( სიმაღლე: 100 პიქსელი; სიგანე: 100 პიქსელი; პოზიცია: აბსოლუტური; ზევით: 0; მარჯვნივ: 0; ქვედა: 0; მარცხნივ: 0; ზღვარი: ავტომატური; გადინება: ავტო; /*-მდე შინაარსი არ გავრცელებულა */ )

2.5. აბსოლუტური პოზიციონირება გვერდის/ბლოკის ცენტრში CSS3 ტრანსფორმაციის გამოყენებით:

თუ ზომები მითითებულია ელემენტისთვის

div ( სიგანე: 300 px; /*დააყენეთ ბლოკის სიგანე*/ სიმაღლე:100px; /*დააყენეთ ბლოკის სიმაღლე*/ ტრანსფორმაცია: translate(-50%, -50%); პოზიცია: აბსოლუტური; ზედა: 50 მარცხნივ: 50% ;

თუ ელემენტს არ აქვს ზომები და არ არის ცარიელი

h1 ( ზღვარი: 0; ტრანსფორმაცია: translate (-50%, -50%); პოზიცია: აბსოლუტური; ზედა: 50%; მარცხნივ: 50%; )

CSS

HTML

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

დიახ, 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 px; ) .შიდა (სიმაღლე: 100 px; ზღვარი: 50 px 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/

ამ მეთოდის მინუსი ის არის, რომ გარე ბლოკის სიმაღლე უნდა იყოს ცნობილი.

გასწორება "გაჭიმვის" გამოყენებით

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

ამისათვის საჭიროა:

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

.გარე (პოზიცია: ფარდობითი;) .შიდა (სიმაღლე: 100 პიქსელი; პოზიცია: აბსოლუტური; ზედა: 0; ქვედა: 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.