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

( Bu səhifə CSS stillərin kaskadlı cədvəllərini istifadə edir)

Bu sənəd məqalənin tərcüməsidir "Web Style Sheets CSS tips & tricks".
Sənədin original versiyası mövcüddür yalnız W3C saytında http://www.w3.org/Style/Examples/007/center.html
Bü tərcümə rəsmi W3C sənəddi DEYIL.
Bütün Müəllif Hüqüqları W3C Malikdir.
Bu sənəddə tərcümə tərcümə səhvləri və mətbəə xətaları ola bilər.

Müəllif: Sabir Sabutai (bütün tərcümələr müəllifindir)
Lokal versiya: http://www.carionltd.com/Style/Example007/center.html

Xəttlər

Bloklar

Vertikal

Nümayiş

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ə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ə:

Bu paraqrafın bütün xəttləri onun qıraqları arasında CSS-in 'text-align' üsulunun 'center' alətinin köməyi ilə mərkəzi nöqtəyə uyğunlaşdırılıb.

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...

Mətnin bu dar bloku mərkəzi nöqtəyə uyğunlaşdırılıb. Nəzərə alın ki, blokun içərisindəki xəttlər mərkəzi nöqtəyə uyğunlaşdırılmayıb (onlar sola düzülüb), bundan əvvəl olan misaldaki kimi yox.

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="...">

Bu şəkil mərkəzi nöqtəyə uyğunlaşdırılıb: some random image

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>

Bu kiçik bir paraqraf vertikal mərkəzi nöqtəyə uyğunlaşdırılıb.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Sənəd 5 may 2001-də yaradılıb;
Son dəyişikliklər $Date: 2007/07/20 16:17:28 $ GMT