Გამოიყენეთ CSS ცენტრის სურათები და სხვა HTML ობიექტები

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

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

სათანადო გზა შეასრულოს ამ ვიზუალური სახეს ორიენტირებული სურათები ან ტექსტი ან თუნდაც თქვენი მთელი ვებგვერდზე არის გამოყენებით კასკადური სტილების (CSS) . უმრავლესობა თვისებები centering უკვე CSS წელს, რადგან ვერსია 1.0, და ისინი მუშაობენ დიდი ერთად CSS3 და თანამედროვე ვებ ბრაუზერები .

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

HTML- ის ცენტრის ელემენტების გამოყენების მიმოხილვა

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

მაღალ დონეზე, შეგიძლიათ გამოიყენოთ CSS:

ბევრი (მრავალი) წლის წინ, ვებ დიზაინერებს შეეძლო

ელემენტი ცენტრის გამოსახულებებსა და ტექსტში გამოიყენებოდეს, მაგრამ HTML ელემენტი ახლა უკვე გაუქმებულია და თანამედროვე ვებ ბრაუზერებში აღარ არის მხარდაჭერილი. ეს იმას ნიშნავს, რომ თავიდან იქნას აცილებული ამ HTML ელემენტის გამოყენების შემთხვევაში, თუ გსურთ თქვენს გვერდს სწორად წარუდგინოს და შეესაბამებოდეს თანამედროვე სტანდარტებს! მიზეზი ამ ელემენტის უარყოფაა, დიდ ნაწილში, რადგან თანამედროვე ვებ-გვერდებზე უნდა შეიცავდეს სტრუქტურა და სტილი. HTML გამოიყენება სტრუქტურის შექმნისას, ხოლო CSS- ს სტილი სჭირდება. იმის გამო, რომ ცენტრირება არის ვიზუალური დამახასიათებელი ელემენტის (როგორ გამოიყურება, ვიდრე ის, რაც არის), ეს სტილი არის სიფრთხილით CSS და არა HTML. ამიტომ, HTML- ის სტრუქტურის დამატება
tag არასწორია თანამედროვე ვებ სტანდარტების მიხედვით. ამის ნაცვლად, ჩვენ მივმართავთ CSS- ს, რომ ჩვენი ელემენტები კარგი და ორიენტირებული იყოს.

CSS- ის ტექსტის ცენტრი

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

p.center {text-align: center; }

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

შიგნით.

აქ არის მაგალითი ამ კლასის გამოყენებული HTML დოკუმენტი:

ეს ტექსტი არის ორიენტირებული.

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

CSS- ის შინაარსის ბლოკად

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

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

div.center {
ზღვარი: 0 ავტო;
სიგანე: 80;
}

ეს CSS shorthand for margin საკუთრება მითითებული ზედა და ქვედა ზღვარი დან მნიშვნელობა 0, ხოლო მარცხენა და მარჯვენა გამოიყენებს "ავტო". ეს არსებითად იღებს ნებისმიერ სივრცეს, რომელიც ხელმისაწვდომია და განცალკევებს ხედვის ფანჯრის ორ მხარეს შორის, ეფექტურად განლაგებულია ელემენტზე გვერდზე.

აქ არის გამოყენებული HTML:

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

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

Centering Images ერთად CSS

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

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

img.center {
ჩვენება: ბლოკი;
ზღვარი მარცხნივ: ავტო;
ზღვარი მარჯვნივ: ავტო;
}

და აქ არის HTML, რომელიც იმიჯი, რომ ჩვენ გვინდა, რომ იყოს ორიენტირებული:

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

Centering ელემენტები ვერტიკალურად CSS

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

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

.vcenter {
ვერტიკალური- align: შუა;
}

Downside ამ მიდგომის არის ის, რომ ყველა ბრაუზერის მხარდაჭერა CSS FlexBox, თუმცა უფრო და უფრო მოდის გარშემო ამ ახალი CSS განლაგება მეთოდი! სინამდვილეში, ყველა თანამედროვე ბრაუზერი დღეს მხარს უჭერს ამ CSS სტილი. ეს ნიშნავს, რომ თქვენი ერთადერთი შეშფოთება Flexbox- ით ბევრად უფრო ძველი ბრაუზერის ვერსია იქნება.

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

  1. მოათავსეთ ელემენტები, რომლებიც უნდა შეიცავდეს შემცველ ელემენტებს, როგორიცაა div.
  2. მინიმალური სიმაღლე შემცველი ელემენტის შესახებ.
  3. გამოაცხადეთ, რომ ელემენტის შემცველი ელემენტია.
  4. მითითებული ვერტიკალური განვიხილეთ "შუა."

მაგალითად, აქ არის CSS:

.vcenter {
მინ-სიმაღლე: 12;
ჩვენება: ცხრილი;
ვერტიკალური- align: შუა;
}

და აქ არის HTML:


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

ვერტიკალური ცენტრი და ძველი ვერსიები Internet Explorer

არსებობს Internet Explorer- ის (IE) ცენტრის შექმნის გზები და გამოიყენოს პირობითი შენიშვნები ისე, რომ მხოლოდ IE ხედავს სტილებს, მაგრამ ისინი ცოტა verbose და მახინჯი არიან. კარგი ამბავია, რომ Microsoft- ის ბოლოდროინდელმა გადაწყვეტილებამ IE- ის ძველი ვერსიების მხარდაჭერა გამოაცხადა, რომლებიც დაუყოვნებლივ უნდა იყვნენ თავიანთ გამოსავალს, რაც ვებ-დიზაინერებს თანამედროვე დიზაინერებისთვის გამოიყენებს, როგორიცაა CSS FlexBox, არა მხოლოდ ცენტრირება, უფრო ადვილია ყველა ვებ დიზაინერი.