CSS შაბლონის ცენტრირება

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

ჩვეულებრივ ცხრილებით აგებისას მარტივად შეგვეძლო დაგვემატებინა პარამეტრი align=”center” table ტეგისთვის, მაგრამ ჩვენ უკვე ვთქვით რომ შაბლონის აწყობის ასეთ ხერხს აღარ მივმართავდით. ამიტომაც მოგვიწევს css-ით გაკეთება.

reset.css ფაილის გამოყენება

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

HTML კოდი

ამის შემდეგ უნდა შევქმნათ div ტეგი იდენტიფიკატორი wrapper

<div id="wrapper">...</div>

CSS კოდი

#wrapper{
width:960px;
margin:0 auto;
}

CSS Centered Page

პირველი ეტაპი დასრულებულია, თითქოს ამით ყველაფერი უნდა დასრულებულიყო, მაგრამ IE (Internet Explorer) რა IE-ა თუ ხელი არ შეგვიშალა მუშაოაბაში? თავის ტკვილის აქაც წავაწყდებით, მაგრამ ადვილად გავიყუჩებთ ტკივილს.

CSS-ში body ტეგს უნდა დავუმათოთ text-align:center ხოლო wrapper-ს text-align:left

body{
text-align:center; /*For IE6 Shenanigans*/
}

საბოლოოდ კი CSS ასეთ სახეს მიიღებს.

*{
margin:0;
padding:0;
}

body{
text-align:center; /*For IE6 Shenanigans*/
}

#wrapper{
width:960px;
margin:0 auto;
text-align:left;
}

ფიფქით (*-ით) აღნიშნული margin და padding პარამეტრები აუცილებელი არ არის თუ ჩვენ reset.css ფაილს გამოვიყენებთ.