Mərkəzləşdirilmiş: CSS-layout

Səhifənin layout bir mərkəzi CSS-yol tez-tez lazım olduqda: məsələn, əsas vahid mərkəzi. gec-tez hər hansı bir coder istifadə etmək olacaq hər biri bu problem bir neçə həllər var.

mərkəzi mətn align

Tez-tez dekorativ məqsədlər üçün tətbiq vaxtı azaltmaq üçün, bu halda mərkəzi mətn CSS qurmaq istəyirəm. Əvvəllər bu HTML-atributları istifadə edilir, lakin indi standart stil ilə mətn align üçün tələb olunur. Siz bir xətt ilə edilir ortada mətn CSS alignment xarici padding dəyişdirmək istədiyiniz blok fərqli olaraq:

• text-align: center;

Bu əmlak miras və bütün uşaqlara valideyn qəbul edilir. Bu mətn, həm də digər elementləri yalnız təsir göstərir. Bu məqsədlə onlar kiçik olmalıdır (məsələn, span) və ya sıra blok (ekran əmlak müəyyən hər hansı bir blok: blok). Sonuncu seçimi də siz eni və element hündürlüyü, abzas daha çevik konfiqurasiya dəyişdirmək üçün imkan verir.

pages tez-tez özünə tag atributu align. Bu dərhal W3C align atributu köhnəlmiş etiraf bəri, kodu etibarsız edir. bir səhifə istifadə məsləhət görülmür.

Mərkəzləşdirilmiş məhəllə

Əgər ortada div alignment təyin etmək istəyirsinizsə, CSS olduqca rahat bir şəkildə təklif edə bilər: xarici padding margin istifadə. Padding blok elementləri və line-blok kimi müəyyən edilə bilər. Svoysva dəyəri 0 (şaquli padding), və avtomatik (üfüqi avtomatik abzas) olmalıdır:

• margin: 0 auto;

İndi bu seçim tamamilə etibarlı kimi tanınır. CSS-margin əmlak us səhifə yerləşdirilməsi element ilə bağlı bir çox problemləri həll etməyə imkan verir: xarici padding istifadə, həmçinin mərkəzi alignment təyin etmək üçün imkan verir.

blokunun sol və ya sağ kənarında Alignment

Bəzən CSS yol mərkəzi alignment tələb etmir, lakin növbəti iki blok, sol tərəfdən bir və digər qoymaq lazımdır - sağ. Bunun üçün üç dəyərlərdən biri edə bilər float əmlak var: sağ və ya heç ayrıldı. Siz yan-yana qoyulmalıdır iki blok var deyirlər. Aşağıdakı kimi Sonra kodu:

• .Sol {float: sol;}
• .Sağ {float: right}

ilk iki blok (məsələn, footer) altında olmalıdır üçüncü blok var, onda aydın xüsusiyyət qeydiyyatdan lazımdır:

• .Sol {float: sol;}
• .Sağ {float: right}
• footer {aydın: həm}

ümumi axını həyata sol və sağ payız dərsləri ilə blokları, ki, bütün digər elementləri uyğun elementləri mövcudluğunu rədd ki. Property aydın: həm axın hüceyrələri çökdürülmüş footer blok və ya hər hansı digər görünən imkan verir və sol və sağ, həm də paketi (float) qadağan edir. Buna görə də, bizim misalda, footer aşağı köçkün olunur.

şaquli alignment

kifayət qədər CSS-yolları mərkəzi alignment təyin etmək hallarda var, siz də uşaq blokunun şaquli mövqeyini dəyişməlidir. Hər hansı bir xətt və ya sıra blok element valideyn element ortasında yerləşir və ya bir ixtiyari yeri ola yuxarı və ya aşağı kənarına tərəf bərk bilər. Ən tez-tez blokunun mərkəzi alignment tələb şaquli-align atributu istifadə edir. digər ərzində iç içə iki blok, bir var düşünək. sıra blok element (inline-məhəllə display) - Bu qapalı vahid. Bu şaquli blok uşaq align lazımdır:

• yuxarı sərhəd alignment - .Uşaq {şaquli-align: top};
• mərkəzi - .Uşaq {şaquli-align: orta};
• alt kənarında alignment - .Uşaq {şaquli-align: alt};

blok elementləri audio text-align və ya şaquli-align tətbiq edilmir.

Qoşulmama ədəd Mümkün problemlər

Bəzən bir balaca çətinlik yarada bilər CSS yol mərkəzi align DIV. bir float istifadə edərkən Məsələn, .İlk .İkinci və üçüncü: məsələn, üç blokları var. ikinci və üçüncü blok ilk yalan. bir sinif ilə element ikinci sol aligned edir və son blok - sağ. uyğunlaşdırılması sonra iki axın düşmüşdür. valideyn element hündürlüyü müəyyən deyilsə (məsələn, 30em), bu törəmə ədəd hündürlüyü uzanır itirir. .İkinci və üçüncü gördüyü xüsusi vahid, - bu səhv qarşısını almaq üçün, "spacer" istifadə edin. CSS-kodu:

• .İkinci {float: left}
• .Üçüncü {float: right}
• .clearfix {hündürlüyü: 0; aydın: həm;}

yalançı tez-tez istifadə: sonra da psevdorasporki yaratmaqla yerə blokları qayıtmaq üçün imkan verir (sinif div nümunə konteyner daxilində yerləşir və bir .İlk .Sol və .Sağ ibarətdir)

• .Sol {float: left}
• .Sağ {float: right}
• .Konteyner: {mezmun sonra: ''; display: masa; aydın: həm;}

Yuxarıda variantları - ən ümumi, bəzi fərqlər var, baxmayaraq ki. Siz həmişə tədqiqatları ilə psevdorasporki yaratmaq üçün asan və ən rahat yol tapa bilərsiniz.

Başqa bir problem tez-tez layout qarşılaşdı - line-blok elementləri alignment. onların hər sonra kosmik avtomatik olaraq əlavə olunur. Qulp mənfi abzas tərəfindən müəyyən edilir margin əmlak, kömək edir. Az tez-tez istifadə, məsələn, yenidən digər yolları var font ölçüsü. Bu halda, əsas element xassələri font-ölçüsü qeydə: 0. mətn blokları içərisində varsa, line-blok elementləri xassələri istədiyiniz font ölçüsü qayıdıb. Məsələn, font-size: 1em. üsul həmişə rahat deyil, belə ki, daha çox xarici qaydalarından ilə versiyası istifadə olunur.

ümumi layout və layout, və mağazalar malların yeri və photos kiçik saytda: Blocks biraraya getirerek gözəl və funksional pages yaratmaq imkan verir.