Ცენტრირებული: CSS განლაგება

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

გასწორება ტექსტი ცენტრი

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

• text-align: center;

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

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

ცენტრირებული ბლოკი

თუ გსურთ მითითებული განვიხილეთ div შუა, CSS შეგვიძლია შემოგთავაზოთ საკმაოდ კომფორტული გზა: გამოყენების გარე padding ზღვარი. Padding შეიძლება განისაზღვროს, როგორც ბლოკი ელემენტები, და ხაზი ბლოკი. Svoysva მნიშვნელობა უნდა იყოს 0 (ვერტიკალური padding), და ავტომატური (ავტომატური წანაცვლება ჰორიზონტალურად):

• ზღვარი: 0 განცხადება;

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

განვიხილეთ მარცხენა ან მარჯვენა კიდეზე ბლოკი

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

• .დაუტოვებიათ {float: მარცხენა;}
• .სწორედ {float: right}

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

• .დაუტოვებიათ {float: მარცხენა;}
• .სწორედ {float: right}
• footer {ნათელია: ორივე}

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

ვერტიკალური

არის შემთხვევები, როდესაც არ არის საკმარისი მითითებული განვიხილეთ ცენტრში CSS გზების, ასევე უნდა შეიცვალოს ვერტიკალური პოზიცია ბავშვი ბლოკი. ნებისმიერი ხაზი ან ზედიზედ ბლოკი ელემენტი შეიძლება იყოს დაპრესილი წინააღმდეგ ზედა ან ქვედა ზღვარზე, რომელიც მდებარეობს შუა მშობელი ელემენტს ან იყოს თვითნებური ადგილმდებარეობა. ყველაზე ხშირად მოითხოვს განვიხილეთ ცენტრში ბლოკი, იგი იყენებს ვერტიკალური-align ატრიბუტი. დავუშვათ, რომ არსებობს ორი ბლოკის ერთ-ერთი წყობილი ფარგლებში სხვა. ამ შიდა ერთეული - row ბლოკი ელემენტს (ჩვენება: inline-block). აუცილებელია უერთდებიან ვერტიკალური ბლოკი ბავშვი:

• განვიხილეთ ზედა ზღვარი - .ბავშვთა {ვერტიკალური-align: top}
• ორიენტირებული - .ბავშვი {ვერტიკალური-align: შუა}
• განვიხილეთ ქვედა ზღვარი - .ბავშვი {ვერტიკალური-align: ბოლოში}

ამავე ბლოკის ელემენტები აუდიო text-align, ან ვერტიკალური-align არ ვრცელდება.

შესაძლო პრობლემები სწორებით ერთეული

ზოგჯერ div align ცენტრში CSS გზა შეიძლება გამოიწვიოს პატარა პრობლემები. მაგალითად, როდესაც გამოყენებით float: მაგალითად, არსებობს სამი ბლოკები .პირველი, მეორე და მესამე. მეორე და მესამე კორპუსები ტყუილი პირველი. ელემენტს კლასის მეორე მარცხნივ გაწონასწორებულია და ბოლო ბლოკი - მარჯვენა. მას შემდეგ, რაც ისეთ ორ ამოვარდა ნაკადი. თუ მშობელი ელემენტი არ არის განსაზღვრული სიმაღლე (მაგალითად, 30em), იგი შეწყდება მონაკვეთი სიმაღლე შვილობილი ერთეული. თავიდან აცილების მიზნით, ეს შეცდომა, გამოიყენოთ "spacer" - სპეცრაზმის, რომელიც ხედავს .მეორე და მესამე. CSS კოდი:

• მეორე {float: მარცხენა}
• მესამე {float: right}
• .clearfix {სიმაღლე: 0; ნათელია: ორივე;}

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

• .დაუტოვებიათ {float: მარცხენა}
• .სწორედ {float: right}
• .კონტეინერის: მას შემდეგ, რაც {შინაარსი: ''; ჩვენება: table; ნათელია: ორივე;}

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

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

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