Stillərin kaskadlı cədvəlləri й
SS məsləhətlər & üsullar

Mərkəzi nöqtəyə uyğunlaşdirma

CSS-in ümumi funksiyası – mətnin mərkəzi nöqtəyə uyğunlaşdırılmasıdır. Faktiki olaraq, üç növ mərkəzi nöqtəyə uyğunlaşdirma mövcüddur:

• Mətnin xəttlərinin mərkəzi nöqtəyə uyğunlaşdırılması
• Mətnin bliklarının və ya şəkilin mərkəzi nöqtəyə uyğunlaşdırılması
• Bliklarının və ya şəkilin vertikal mərkəzi nöqtəyə uyğunlaşdırılması

Mətnin xəttlərinin mərkəzi nöqtəyə uyğunlaşdırılması

Mərkəzi nöqtəyə uyğunlaşdirmanın ən ümumi istifadə edilən və (buna görə də) ən asand növü - mətnin paraqrafda və ya sətirbaşında xəttlərinin mərkəzi nöqtəyə uyğunlaşdırılması növüdür. Bu üçün CSS-da 'text-align' üsulu var:

P { text-align: center }
H2 { text-align: center }

hər xətti qıraqları arasında mərkəzi nöqtəyə uyğunlaşdırılmış P və ya H2 çevirir, belə:

Bliklarının və ya şəkilin mərkəzi nöqtəyə uyğunlaşdırılması

Bəzən mətni yox, ümumiyyətlə bloku mərkəzi nöqtəyə uyğunlaşdırmaq lazım olur. Yaxud başqa sözlə: istəyirik ki, sol və sağ qıraqlar eyni olsun. Bu üçün qıraqları 'auto' qoymaq laımdır. Bu adətən fiksasiya edilmiş eni olan bloklar üçün istifadə olunur, çünki blok özü mahirdirsə, mümkün olan enliyi qəbul edəcək. Misal üçün:

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<P class="blocktext">This rather...

Bu da şəkilin mərkəzi nöqtəyə uyğunlaşdırma üsuludur: onu xüsusi bloka yerləşdirin və qıraqlar sifətini tədbiq edin. Məsələn:

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

Vertikal mərkəzi nöqtəyə uyğunlaşdırilma

2 dərəcəli  CSS-də vertikal mərkəzi nöqtəyə uyğunlaşdırılma xüsusiyyəti yoxdur. Ola bilsin ki, bu CSS-in  3 dərəcəsində olacaq. Lakin, hətta CSS2-də bir neçə xüsusiyyətləri kombinasiya edərək blokları mərkəzi nöqtəyə uyğunlaşdıra bilərsiniz. Tryuk ondan ibarətdir ki, zahiri blok cədvəlin özəyi kimi formatlandırılmalıdır,çünki özəyin içərisində olan vertikal mərkəzi nöqtəyə uyğunlaşdırılmalıdır.

Aşağıda göstərilən misalda müəyyən hündürlüyü olan blokun icərisindəki paraqraf mərkəzi nöqtəyə uyğunlaşdırılır. Ayrı bir misal göstərir ki, paraqraf brauzerin pəncərəsində vertikal mərkəzi nöqtəyə uyğunlaşdırılıb, çünki pəncərənin hündürlüyü üzrə yerləşdirilmiş blokun içərisindədir.

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>This small paragraph...
</DIV>