Müəllifdən: Sizi bir daha bloqumuzun səhifələrində salamlayıram. Bugünkü məqalədə bu barədə danışmaq istərdim müxtəlif texnikalar hər iki bloka və onların məzmununa tətbiq oluna bilən hizalanma. Xüsusilə, css-də blokları necə hizalamaq, eləcə də mətnin uyğunlaşdırılması.
Blokların mərkəzə uyğunlaşdırılması
CSS-də bloku mərkəzləşdirmək asandır. Bu, çoxlarına ən yaxşı məlum olan texnikadır, lakin mən ilk növbədə bu barədə indi danışmaq istərdim. Bu, mərkəzləşdirilmiş üfüqi uyğunlaşma deməkdir ana element. Necə edilir? Tutaq ki, bizim bir konteynerimiz var və eksperimental mövzumuz oradadır:
< div id = "wrapper" > < div id = "header" > < / div > < / div > |
Tutaq ki, bu saytın başlığıdır. Pəncərənin bütün eni boyunca uzanmır və biz onu mərkəzləşdirməliyik. Biz belə yazırıq:
#başlıq( eni / maksimum eni: 800px; kənar: 0 avtomatik; |
Biz dəqiq və ya maksimum genişliyi göstərməliyik və sonra əsas xüsusiyyəti yazmalıyıq - margin: 0 auto. Başlığımızın xarici kənarlarını təyin edir, birinci dəyər yuxarı və aşağı kənarları, ikincisi isə sağ və sol kənarları müəyyən edir. Avtomatik dəyər brauzerə hər iki tərəfdəki doldurmanı avtomatik hesablamağı bildirir ki, element tam olaraq valideyndə mərkəzləşsin. Rahat!
Mətnin uyğunlaşdırılması
Bu da çox sadə bir texnikadır. Bütün daxili elementləri hizalamaq üçün istifadə edə bilərsiniz mətn hizalama xüsusiyyəti və onun dəyərləri: sol, sağ, mərkəz. Sonuncu mətni mərkəzləşdirir, bizə lazım olan budur. Eyni şəkildə, hətta bir şəkil düzəldə bilərsiniz, çünki o, standart olaraq da var daxili element.
Mətni şaquli olaraq hizalayın
Ancaq bu daha mürəkkəbdir. Varsayılan olaraq, mətni blok konteynerində şaquli olaraq asanlıqla mərkəzləşdirən sadə, tanınmış xüsusiyyət yoxdur. Bununla belə, layout dizaynerlərinin illər ərzində ortaya qoyduğu bir neçə texnika var.
Doldurma istifadə edərək blokun hündürlüyünü təyin edin. Yol, hündürlükdən istifadə edərək açıq hündürlüyü təyin etmək deyil, eyni olmalıdır, yuxarı və aşağı paddinglərdən istifadə edərək süni şəkildə yaratmaqdır. İstənilən blok yaradaq və ona aşağıdakı xassələri yazaq:
div( fon: #ccc; doldurma: 30px 0; )
div( fon: #ccc; doldurma: 30px 0; |
Arxa fon sadəcə kənarları və yastıqları vizual olaraq göstərmək üçündür. İndi blokun hündürlüyü bu iki girintidən və xəttin özündən ibarətdir və hamısı belə görünür:
Blok üçün xəttin hündürlüyünü təyin edin. Məncə daha çoxdur Doğru yol, əgər mətnin bir sətirini hizalamaq lazımdırsa. Onunla hündürlüyü hündürlük xassəsindən istifadə edərək normaya uyğun yaza bilərsiniz. Bundan sonra o, bütövlükdə blokun hündürlüyü ilə eyni xəttin hündürlüyünü də təyin etməlidir.
div (hündürlük: 60px; xətt hündürlüyü: 60px; )
div( hündürlük: 60px; xəttin hündürlüyü: 60px; |
Nəticə yuxarıdakı şəkildəki kimi olacaq. Doldurma əlavə etsəniz də hər şey işləyəcək. Ancaq yalnız bir xətt üçün. Elementdə daha çox mətnə ehtiyacınız varsa, bu üsul işləməyəcək.
Bloku cədvəl xanasına çevirin. Bu metodun mahiyyəti ondan ibarətdir ki, cədvəl xanası elementi şaquli olaraq mərkəzləşdirən vertical-align: middle xüsusiyyətinə malikdir. Müvafiq olaraq, bu halda bloku aşağıdakı kimi təyin etmək lazımdır:
div (ekran: cədvəl hüceyrəsi; şaquli düzülmə: orta; )
div( ekran: masa - hüceyrə; şaquli - align: orta; |
Bu üsul yaxşıdır, çünki siz istədiyiniz qədər mətni mərkəzə uyğunlaşdıra bilərsiniz. Amma divimizin yerləşdiyi bloka display: table yazmaq daha yaxşıdır, əks halda işləməyə bilər.
Yaxşı, bu gün üçün son texnikaya gəldik - bu, blokların özlərinin şaquli hizalanmasıdır. Demək lazımdır ki, yenə də bunun üçün xüsusi olaraq nəzərdə tutulan heç bir əmlak yoxdur, ancaq bilməli olduğunuz bir neçə fənd var.
Abzasları faiz olaraq təyin edin. Əgər ana elementin hündürlüyünü bilirsinizsə və içərisinə başqa birini yerləşdirin blok elementi, sonra faiz abzasından istifadə edərək onu mərkəzləşdirə bilərsiniz. Məsələn, valideynin hündürlüyü 600 pikseldir. İçinə 300 piksel yüksəklikdə bir blok yerləşdirirsiniz. Onu mərkəzləşdirmək üçün yuxarıdan və aşağıdan nə qədər geri çəkilmək lazımdır? Hər biri 150 piksel, bu valideynin hündürlüyünün 25%-ni təşkil edir.
Bu üsul yalnız ölçülər hesablamalara imkan verdikdə hizalamağa imkan verir. Valideyninizin hündürlüyü 887 pikseldirsə, heç nəyi dəqiq qeyd edə bilməyəcəksiniz, bu artıq aydındır.
Cədvəl xanasına element daxil edin. Yenə ana elementi cədvəl xanasına çevirsək, ona daxil edilən blok avtomatik olaraq şaquli olaraq mərkəzləşəcək. Bunu etmək üçün, valideyn yalnız şaquli align: orta təyin etməlidir.
Əgər buna əlavə olaraq biz də margin yazırıqsa: 0 auto, onda element üfüqi olaraq mərkəzləşəcək!
Gününüz xeyir, bu nəşrin abunəçiləri və oxucuları. Bu gün mən təfərrüatlara girmək və CSS-də mətni necə mərkəzləşdirməyi sizə danışmaq istəyirəm. Əvvəlki bəzi yazılarda dolayısı ilə toxunmuşdum bu mövzu, belə ki, bu sahədə müəyyən biliklərə sahibsiniz.
Ancaq bu nəşrdə sizə məlumat verəcəyəm bütün mümkün yollarla obyektlərin düzülməsi, həmçinin paraqraflarda abzas və qırmızı xətlərin necə çəkiləcəyini izah edin. Beləliklə, materialı öyrənməyə başlayaq!
HTML və onun törəmələri və hizalayın
Bu üsul demək olar ki, heç vaxt istifadə edilmir, çünki o, kaskad üslub cədvəli alətləri ilə əvəz edilmişdir. Ancaq belə bir etiketin olduğunu bilmək sizə zərər verməyəcək.
Doğrulama ilə bağlı ( bu termin"" məqaləsində ətraflı təsvir edilmişdir), sonra html spesifikasiyası özü istifadəni pisləyir < mərkəz>, çünki etibarlılıq üçün keçiddən istifadə etmək lazımdır DOCTYPE>.
Bu tipqadağan olunmuş elementlərin keçməsinə imkan verir.
İndi keçək atributuna hizalayın. O, obyektlərin üfüqi düzülməsini təyin edir və etiket bəyanından sonra uyğunlaşır. Tipik olaraq, məzmunu sola uyğunlaşdırmaq üçün istifadə edilə bilər ( sol), sağ kənar boyunca ( sağ), mərkəzləşdirilmiş ( Mərkəz) və mətn genişliyinə görə ( haqq qazandırmaq).
Aşağıda şəkil və paraqrafı mərkəzə yerləşdirəcəyim bir nümunə verəcəyəm.
Bu məzmun mərkəzləşəcək.
Nəzərə alın ki, təsvir üçün təhlil etdiyimiz atribut bir qədər fərqli mənalara malikdir.
İstifadə etdiyim nümunədə align="orta". Bunun sayəsində şəkil düzülmüşdü ki, cümlə şəklin ortasında aydın şəkildə yerləşdi.
Css-də mərkəzləşdirmə vasitələri
CSS xassələri blokların düzülməsi, mətn və qrafik məzmun, daha tez-tez istifadə olunur. Bu, ilk növbədə üslubların həyata keçirilməsinin rahatlığı və çevikliyi ilə bağlıdır.
Beləliklə, mətnin mərkəzləşdirilməsinin birinci xüsusiyyətindən başlayaq - bu mətn-hizalayın.
Align in ilə eyni şəkildə işləyir. Açar sözlər arasında siz ümumi siyahıdan birini seçə və ya əcdadın xüsusiyyətlərini miras ala bilərsiniz ( miras almaq).
Qeyd etmək istərdim ki, css3-də daha 2 parametr təyin edə bilərsiniz: başlamaq– mətnin yazılması qaydalarından asılı olaraq (sağdan sola və ya əksinə), düzülməni sola və ya sağa (sola və ya sağa iş kimi) təyin edir və son– başlanğıcın əksi (mətn soldan sağa yazanda sağ, sağdan sola yazanda – sola kimi çıxış edir).
Sağdakı cümlə
Sondan istifadə edərək cümlə
Mən sizə kiçik bir hiylə haqqında danışacağam. Dəyər seçərkən haqq qazandırmaq son sətir aşağıdan yararsız şəkildə sallana bilər. Məsələn, onu mərkəzdə yerləşdirmək üçün əmlakdan istifadə edə bilərsiniz mətn-align-son.
Sayt məzmununu və ya cədvəl xanalarını şaquli olaraq hizalamaq üçün xassədən istifadə edin şaquli düzləşdirmə. Aşağıda əsasını təsvir etdim açar sözlər element.
| Açar söz | Məqsəd |
| əsas | Əsas xətt adlanan əcdad xəttinə düzülməni təyin edir. Əgər əcdad obyektində belə bir xətt yoxdursa, düzləşdirmə aşağı sərhəd boyunca baş verir. |
| orta | Mutasiya edilmiş obyektin ortası əsas elementin hündürlük mərtəbəsinin əlavə olunduğu əsas xəttə uyğunlaşdırılır. |
| alt | Seçilmiş məzmunun aşağı hissəsi onun altındakı obyektin aşağı hissəsinə uyğunlaşır. |
| üst | Aşağıya bənzəyir, yalnız ilə üst hissəsi obyekt. |
| super | Simvolun yuxarı işarəsini edir. |
| alt | Elementi alt simvol edir. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
C IN E THAQQINDATO
|
girintilər
Və nəhayət, paraqraf abzaslarına gəlirik. IN css dili adlı xüsusi xassədən istifadə edir mətn girintisi.
Onun köməyi ilə həm qırmızı xətt, həm də çıxıntı edə bilərsiniz (mənfi bir dəyər göstərməlisiniz).
Qırmızı xətt yaratmaq üçün yalnız bir parametr bilmək lazımdır.
Bu sadə mətn girinti xüsusiyyətidir.
Hər bir nümunəni təcrübədə sınayanları tərifləyirəm. Blogumun keçidlərini dostlarınıza göndərin və abunə olmağı unutmayın. Uğurlar! Sağ ol!
Hörmətlə, Roman Çuşov
Oxuyun: 675 dəfə
Çox vaxt vəzifə səhifənin / ekranın mərkəzində bir bloku uyğunlaşdırmaqdır və hətta Java skripti olmadan, tapşırıq olmadan sərt ölçülər və ya mənfi abzaslar, beləliklə, blok ölçüsünü keçdikdə sürüşmə çubuqları da valideyn üçün işləyəcək. İnternetdə bloku ekranın mərkəzinə necə uyğunlaşdırmaq barədə kifayət qədər monoton nümunələr var. Bir qayda olaraq, onların əksəriyyəti eyni prinsiplərə əsaslanır.
Aşağıda problemi həll etməyin əsas yolları, onların müsbət və mənfi cəhətləri verilmişdir. Nümunələrin mahiyyətini başa düşmək üçün təqdim olunan keçidlərdəki nümunələrdə Nəticə pəncərəsinin hündürlüyünü/enini azaltmağı məsləhət görürəm.
Seçim 1: Mənfi boşluq.
Mövqeləşdirmə blok yuxarı və sol atributlardan 50% istifadə edərək və blokun hündürlüyünü və enini əvvəlcədən bilməklə, ölçüsünün yarısına bərabər olan mənfi marja təyin edin. blok. Böyük bir minus bu seçim mənfi padding saymaq lazımdır ki,. Həmçinin blok sürüşdürmə çubuqları ilə əhatə olunduqda tamamilə düzgün davranmır - mənfi kənarları olduğu üçün sadəcə kəsilir.
Ana ( en: 100%; hündürlük: 100%; mövqe: mütləq; yuxarı: 0; sol: 0; daşqın: avtomatik; ) .block ( en: 250px; hündürlük: 250px; mövqe: mütləq; yuxarı: 50%; sol : 50% marja: -125px 0 0 -125px img (maksimum genişlik: 100%; hündürlük: avtomatik; ekran: blok; kənar: 0 avtomatik; sərhəd: heç biri; ) )
Seçim 2. Avtomatik abzas.
Daha az yayılmışdır, lakin birincisinə bənzəyir. üçün blok eni və hündürlüyü təyin edin, atributları yuxarı sağ aşağı soldan 0-a qoyun və təyin edin marja avtomatik. Bu seçimin üstünlüyü sürüşmə çubuqlarının işləməsidir valideyn, əgər sonuncunun 100% eni və hündürlüyü varsa. Bu metodun dezavantajı ölçülərin sərt qurulmasıdır.
Ana ( en: 100%; hündürlük: 100%; mövqe: mütləq; yuxarı: 0; sol: 0; daşqın: avtomatik; ) .block ( en: 250px; hündürlük: 250px; mövqe: mütləq; yuxarı: 0; sağ: 0; alt: 0; sol: 0; img (maksimum genişlik: 100%; hündürlük: avtomatik; ekran: blok; kənar: 0; sərhəd: heç biri; )
Seçim 3. Cədvəl.
soruşaq valideyn masa üslubları, hüceyrə valideyn Mətnin düzülməsini mərkəzə qoyun. A blok xətti blok modelini təyin edirik. Əldə etdiyimiz çatışmazlıqlar işləməyən sürüşmə çubuqlarıdır və ümumiyyətlə cədvəlin "emulyasiyasının" estetikası deyil.
Ana ( en: 100%; hündürlük: 100%; displey: cədvəl; mövqe: mütləq; yuxarı: 0; sol: 0; > .daxili ( displey: masa-xana; mətni align: mərkəz; şaquli hizalama: orta; ) ) .blok ( ekran: inline-block; img ( ekran: blok; sərhəd: heç biri; ) )
Bu nümunəyə sürüşdürmə əlavə etmək üçün dizayna daha bir element əlavə etməli olacaqsınız.
Misal: jsfiddle.net/serdidg/fk5nqh52/3.
Variant 4. Pseudo-element.
Bu seçim əvvəlki üsullarda sadalanan bütün problemlərdən məhrumdur və orijinal problemləri də həll edir. Məsələ ondadır ki valideynüslubları təyin edin psevdo elementəvvəl, yəni 100% hündürlük, mərkəzə uyğunlaşma və inline blok modeli. ilə eynidir blok mərkəzləşdirilmiş xətt blok modeli qurulur. Kimə blok altına "düşmədi" psevdo element, birincinin ölçüləri ondan böyük olduqda valideyn, göstərir valideyn white-space: nowrap və font-size: 0, bundan sonra blok bu üslubları aşağıdakılarla ləğv edin - ağ boşluq: normal. IN bu misalda font-size: 0 arasında yaranan boşluğu aradan qaldırmaq lazımdır valideyn Və blok kod formatına görə. Boşluq başqa yollarla çıxarıla bilər, lakin sadəcə ondan qaçmaq ən yaxşı hesab olunur.
Valideyn ( en: 100%; hündürlük: 100%; mövqe: mütləq; yuxarı: 0; sol: 0; daşqın: avtomatik; boşluq: nowrap; mətni align: mərkəz; şrift ölçüsü: 0; &:əvvəl ( hündürlük: 100% ekran: şaquli-align: orta;
Və ya valideynin bütün səhifəni deyil, yalnız pəncərənin hündürlüyünü və enini tutmasına ehtiyacınız varsa:
Valideyn (mövqe: sabit; yuxarı: 0; sağ: 0; aşağı: 0; sol: 0; daşqın: avtomatik; boşluq: nowrap; mətni align: mərkəz; şrift ölçüsü: 0; &:əvvəl ( hündürlük: 100% displey: şaquli-align: content: "" ( display: block; border: none; ) )
Seçim 5. Flexbox.
Ən sadə və ən zərif üsullardan biri flexbox-dan istifadə etməkdir. O, lazımsız bədən hərəkətlərini tələb etmir, baş verənlərin mahiyyətini kifayət qədər aydın şəkildə təsvir edir və olduqca çevikdir. Seçərkən xatırlamağa dəyər yeganə şey bu üsul- 10-cu versiyadan IE üçün dəstək. caniuse.com/#feat=flexbox
Ana ( en: 100%; hündürlük: 100%; mövqe: sabit; yuxarı: 0; sol: 0; displey: əyilmə; align-elementlər: mərkəz; align-content: mərkəz; əsaslandırma-məzmun: mərkəz; daşqın: avtomatik; ) .block ( fon: #60a839; img ( ekran: blok; sərhəd: heç biri; ) )
Seçim 6. Transformasiya.
Quruluşla məhdudlaşsaq və ana elementi manipulyasiya etmək üçün heç bir yol yoxdursa, uyğundur, lakin blok bir şəkildə uyğunlaşdırılmalıdır. köməyə gələcək css funksiyası tərcümə etmək() . 50% dəyərində mütləq yerləşdirmə blokun yuxarı sol küncünü tam olaraq mərkəzə yerləşdirəcək, sonra mənfi tərcümə dəyəri bloku özünə nisbətən hərəkət etdirəcək öz ölçüləri. Nəzərə alın ki, mənfi təsirlər bulanıq kənarlar və ya şrift üslubunda görünə bilər. Həmçinin, bu üsul java-skriptdən istifadə edərək blokun mövqeyinin hesablanması ilə bağlı problemlərə səbəb ola bilər css istifadə edərək mülkləri buraxdı Blok üçün müəyyən edilmiş qayda kömək edə bilər: margin-right: -50%; .
Ana ( en: 100%; hündürlük: 100%; mövqe: sabit; yuxarı: 0; sol: 0; daşqın: avtomatik; ) .blok ( mövqe: mütləq; yuxarı: 50%; sol: 50%; çevirmək: tərcümə( -50%, -50% img (ekran: blok; ) )
Seçim 7. Düymə.
İstifadəçi seçimi harada blok düymə etiketində çərçivəyə salınmışdır. Düymə daxilində olan hər şeyi, yəni inline və blok-xətt (inline-block) modelinin elementlərini mərkəzləşdirmək xüsusiyyətinə malikdir. Praktikada istifadə etməyi məsləhət görmürəm.
Ana ( en: 100%; hündürlük: 100%; mövqe: mütləq; yuxarı: 0; sol: 0; daşqın: avtomatik; fon: heç biri; haşiyə: heç biri; kontur: heç biri; ) .block ( ekran: inline-block; img (ekran: blok;; sərhəd: heç biri; ) )
Bonus
4-cü seçim ideyasından istifadə edərək, xarici kənarları təyin edə bilərsiniz blok, və sonuncu adekvat şəkildə sürüşdürmə çubuqları ilə əhatə olunacaq.Nümunə: jsfiddle.net/serdidg/nfqg9rza/2.
Siz həmçinin şəkli mərkəzə uyğunlaşdıra bilərsiniz və əgər şəkil daha böyükdürsə valideyn, ölçüsünə görə ölçün valideyn.
Nümunə: jsfiddle.net/serdidg/nfqg9rza/3.
Böyük bir şəkil ilə nümunə:
Veb sayt səhifələrinin düzülüşü və mərkəzə uyğunlaşdırılması yaradıcı bir cəhddir və tez-tez yeni başlayanlar üçün çətinlik yaradır. Beləliklə, gəlin bunu necə edəcəyinə baxaq. Tutaq ki, biz aşağıdakı struktura malik bir səhifə yaratmaq istəyirik:
Səhifəmiz dörd blokdan ibarətdir: başlıq, menyu, məzmun və altbilgi. Səhifəni mərkəzləşdirmək üçün bu dörd bloku bir əsas bloka yerləşdirəcəyik:
Sayt başlığı
Məzmun
Saytın aşağı hissəsi
Bu quruluşu nümunə olaraq istifadə edərək, bir neçə variantı nəzərdən keçirəcəyik.
Rezin saytın düzülüşü və mərkəzləşdirilməsi
Kauçuk sahəsini yerləşdirərkən istifadə olunan əsas ölçü vahidi -% -dir, çünki sayt eni boyunca uzanmalı və bütün boş yerləri tutmalıdır.
Buna görə də, "başlıq" və "altbilgi" bloklarının eni ekranın eninin 100% -i olacaqdır. "Menyu" blokunun eni 30% olsun və "məzmun" bloku "menyu" blokunun yanında yerləşməlidir, yəni. onun "menyu" blokunun eninə bərabər eni ilə sol kənarı (margin-sol) olmalıdır, yəni. otuz%.
“Menyu” və “məzmun” bloklarının yan-yana oturması üçün “menyu” blokunu üzən hala gətirək və onu sol kənara itələyək. Bloklarımız üçün fon rənglərini də təyin edəcəyik. İndi gəlin bütün bunları stil cədvəlinə yazaq (style.css səhifəsində)
#header(fon:#3e4982; eni:100%; hündürlük:110px; mətni align:mərkəz; rəng:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( fon:#6173cb; float :left; width:300px; text-align:center; #3e4982; width:100%; text-align:center:#FFFFFF;
Blokların hündürlüyü nəticənin görünməsi üçün şərti olaraq təyin edildi. Brauzerinizdə səhifəmizə baxın:
Brauzer pəncərəsinin ölçüsünü dəyişdirsəniz, bütün blokların eni dəyişəcək. Bu həmişə əlverişli deyil, çünki... Menyu bloku uzandıqda, boş yer görünür. Buna görə də, "menyu" blokunun eni tez-tez sabitlənir, buna görə də eyni şeyi edək. Bunu etmək üçün stil cədvəlində müvafiq xassələrin dəyərlərini dəyişdirin:
... #menu( fon:#6173cb; float:sol; en:200px; hündürlük:300px; ) #content( background:#ffffff; margin-left:200px; hündürlük:300px; ) ...
İndi səhifəmiz daha təbii uzanır. At rezin düzümü Səhifələr ekranın tam genişliyini tutur, ona görə də səhifənin hizalanması tələb olunmur.
Ancaq istəsəniz, səhifənizin ekranın solunda və sağında bərabər doldurulmasını təmin edə bilərsiniz. Bunu etmək üçün, bütün digər bloklar üçün konteyner olan "əsas" bloka bir üslub əlavə etməlisiniz:
İndi səhifəmiz belə görünür:
Saytın düzülüşü və mərkəzləşdirilməsi, sabit eni
Bu halda soruşmaq məcburiyyətində qalacağıq sabit ölçülər bloklarımız:
#main( width:800px; ) #header(fon:#3e4982; en:800px; hündürlük:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu ( fon:#6173cb; float:sol; en:200px; hündürlük:300px; mətni align:mərkəz; rəng:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; hündürlüyü:300px; text-align:center; ölçüsü: 14px padding-top: 10px )
İndi səhifəmiz ekranın sol kənarına sıxılır.
Bu halda sayt səhifələrinin mərkəzə uyğunlaşdırılması aşağıdakı kimi həyata keçirilə bilər. Unutmayaq ki, səhifəmizdə "bədən" etiketi var, ona da genişlik və bir az dolğunluq verilə bilər.
Gəlin bunu edək: "bədən" etiketinə 800 piksel eni ("əsas" blok kimi) və solda 50% doldurun. Sonra "əsas" blokun bütün məzmunu ekranın sağ tərəfində (yəni ortadan sağa) göstəriləcək:
“Əsas” blokumuzun ekranın ortasında yerləşməsi üçün onun ortası “bədən” etiketinin ortası ilə üst-üstə düşməlidir. Bunlar. "əsas" bloku yarısına qədər sola keçirməlisiniz. "Əsas" blokun eni 800 pikseldir, yəni ona "margin-left:-400px" xassəsini təyin etməlisiniz. Bəli, bu xüsusiyyət mənfi dəyərlər qəbul edə bilər, sonra sol kənar azalır (yəni sola sürüşdürülür). Və bu, bizə lazım olan şeydir.
Stil cədvəli indi belə görünür:
body( en:800px; padding-left:50%; ) #main( width:800px; margin-left:-400px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center ; color:#FFFFFF; font-size:24px; padding-top:40px; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; eni:800px;text-align:center;font-size:14px;
Brauzerdəki səhifəmiz tam ortada yerləşir:
Biz sayt səhifələrinin mərkəzləşdirilməsi üçün iki varianta baxdıq, onlar dogma deyil; Siz sınaqdan keçirib öz versiyanızı yarada bilərsiniz, sadəcə onun necə işlədiyini yoxlayın müxtəlif brauzerlər. Təəssüf ki, FireFox və ya Opera-da yaxşı görünənlər IE-də tamamilə anlaşılmaz şəkildə göstərilə bilər və əksinə. Və bunu yadda saxlamalıyıq.
Yaradıcı axtarışlarınızda sizə uğurlar!
Düşünürəm ki, layout ilə məşğul olmaq məcburiyyətində qalan bir çoxunuz elementləri şaquli olaraq hizalamaq ehtiyacı ilə qarşılaşdınız və elementi mərkəzə uyğunlaşdırarkən yaranan çətinlikləri bildiniz.
Bəli, üçün şaquli düzülmə CSS-də çoxlu dəyərlərə malik xüsusi şaquli hizalama xüsusiyyəti var. Ancaq praktikada heç də gözlənildiyi kimi işləmir. Gəlin bunu anlamağa çalışaq.
Aşağıdakı yanaşmaları müqayisə edək. İstifadə edərək hizalama:
- masalar,
- girinti,
- xətt hündürlüyü
- uzanma,
- mənfi marja,
- çevirmək
- psevdo element
- flexbox.
İki var div elementi, onlardan biri digərinin içində yuvalanmışdır. Gəlin onlara müvafiq siniflər verək - xarici və daxili.
Çətinlik daxili elementi xarici elementin mərkəzi ilə uyğunlaşdırmaqdır.
Birincisi, xarici və daxili blokların ölçüləri olduqda vəziyyəti nəzərdən keçirək məlumdur. Gəlin qayda displeyini əlavə edək: daxili elementə inline-block və text-align: center və şaquli-align: orta xarici elementə.
Unutmayın ki, hizalanma yalnız daxili və ya daxili blok ekran rejiminə malik elementlərə aiddir.
Blokların ölçülərini də təyin edək fon rəngləri onların sərhədlərini görmək.
Xarici ( en: 200px; hündürlük: 200px; mətni düzləndirmək: mərkəzə; şaquli hizalama: orta; fon rəngi: #ffc; ) .daxili ( ekran: inline-blok; en: 100px; hündürlük: 100px; fon rəngi : #fcc )
Üslubları tətbiq etdikdən sonra daxili blokun şaquli deyil, üfüqi şəkildə düzüldüyünü görəcəyik:
http://jsfiddle.net/c1bgfffq/
Niyə belə oldu? Məsələ burasındadır ki, şaquli hizalama xüsusiyyəti hizalanmaya təsir göstərir elementin özü, məzmunu deyil(cədvəl xanalarına tətbiq edildiyi hallar istisna olmaqla). Buna görə də tətbiq bu əmlakın Kimə xarici element heç nə vermədi. Üstəlik, bu xassəni daxili elementə tətbiq etmək də heç nə etməyəcək, çünki daxili bloklar qonşu bloklara nisbətən şaquli düzülür və bizim vəziyyətimizdə bir daxili blok var.
Bu problemi həll etmək üçün bir neçə texnika var. Aşağıda onların hər birinə daha yaxından nəzər salacağıq.
Cədvəldən istifadə edərək hizalama
Ağla gələn ilk həll xarici bloku bir hüceyrədən ibarət bir cədvəllə əvəz etməkdir. Bu halda, hizalama hüceyrənin məzmununa, yəni daxili bloka tətbiq olunacaq.
http://jsfiddle.net/c1bgfffq/1/
Aydın mənfi bu qərar– semantik baxımdan düzülmə üçün cədvəllərdən istifadə etmək düzgün deyil. İkinci çatışmazlıq ondan ibarətdir ki, cədvəl yaratmaq üçün ətrafa başqa element əlavə etmək lazımdır xarici vahid.
Cədvəl və td teqlərini div ilə əvəz etməklə və CSS-də cədvəlin göstərilməsi rejimini təyin etməklə birinci mənfi qismən aradan qaldırıla bilər.
.xarici sarğı ( displey: masa; ) .xarici ( ekran: masa xanası; )
Bununla belə, xarici blok hələ də bütün sonrakı nəticələrlə bir masa olaraq qalacaq.
Girinti istifadə edərək hizalama
Daxili və xarici blokların hündürlükləri məlumdursa, hizalanma daxili blokun şaquli girintilərindən istifadə edərək aşağıdakı düsturla təyin edilə bilər: (H xarici - H daxili) / 2.Xarici ( hündürlük: 200px; ) .daxili ( hündürlük: 100px; kənar: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/
Həllin dezavantajı onun yalnız tətbiq oluna bilməsidir məhdud sayda hər iki blokun hündürlüyü məlum olduqda.
Xətt hündürlüyündən istifadə edərək hizalama
Daxili blokun mətnin birdən çox sətirini tutmamalı olduğunu bilirsinizsə, o zaman line-height xüsusiyyətindən istifadə edib onu təyin edə bilərsiniz. hündürlüyə bərabərdir xarici blok. Daxili blokun məzmunu ikinci sətirə bükülməməli olduğundan, ağ boşluq əlavə etmək tövsiyə olunur: nowrap və daşqın: gizli qaydalar.Xarici ( hündürlük: 200px; xətt hündürlüyü: 200px; ) .daxili (ağ boşluq: nowrap; daşqın: gizli; )
http://jsfiddle.net/c1bgfffq/12/
Həmçinin bu texnika düzəldilməsi üçün də istifadə oluna bilər çoxsətirli mətn, daxili blok üçün xətt hündürlüyü dəyərini yenidən təyin etsəniz və həmçinin ekranı əlavə etsəniz: inline-block və vertikal-align: orta qaydaları.
Xarici ( hündürlük: 200px; xəttin hündürlüyü: 200px; ) .daxili (xətt hündürlüyü: normal; displey: sətir-blok; şaquli hizalama: orta; )
http://jsfiddle.net/c1bgfffq/15/
Bu metodun dezavantajı xarici blokun hündürlüyünün bilinməsidir.
"Uzanır" istifadə edərək hizalama
Bu üsul xarici blokun hündürlüyü məlum olmayan, lakin daxili blokun hündürlüyü məlum olduqda istifadə edilə bilər.Bunu etmək üçün sizə lazımdır:
- xarici bloka təyin edin nisbi yerləşdirmə, və daxili - mütləq;
- qaydaları yuxarıya əlavə edin: 0 və aşağı: 0 daxili bloka, bunun nəticəsində xarici blokun bütün hündürlüyünə qədər uzanacaq;
- daxili blokun şaquli doldurulmasını avtomatik olaraq təyin edin.
http://jsfiddle.net/c1bgfffq/4/
Bu texnikanın arxasında duran fikir ondan ibarətdir ki, uzadılmış və tamamilə yerləşdirilmiş blok üçün hündürlüyün təyin edilməsi, avtomatik olaraq təyin edildikdə brauzerin şaquli dolğunluğu bərabər nisbətdə hesablamasına səbəb olur.
Mənfi kənar kənar ilə hizalanma
Bu üsul geniş yayılmışdır və çox tez-tez istifadə olunur. Əvvəlki kimi, xarici blokun hündürlüyü bilinməyəndə, daxili blokun hündürlüyü məlum olduqda istifadə olunur.Xarici bloku nisbi yerləşdirməyə, daxili bloku isə mütləq yerləşdirməyə təyin etməlisiniz. Sonra daxili bloku xarici blokun üst hissəsinin hündürlüyünün yarısına qədər aşağıya köçürməlisiniz: 50% və öz hündürlüyünün yarısına qədər yuxarıya qaldırın: -H daxili / 2.
Xarici ( mövqe: nisbi; ) .daxili ( hündürlük: 100px; mövqe: mütləq; yuxarı: 50%; kənar-yuxarı: -50px; )
http://jsfiddle.net/c1bgfffq/13/
Bu metodun dezavantajı, daxili bölmənin hündürlüyünün bilinməsidir.
Transformasiya ilə uyğunlaşma
Bu üsul əvvəlkinə bənzəyir, lakin daxili bölmənin hündürlüyü məlum olmayanda istifadə edilə bilər. Bu halda, mənfi piksel doldurma təyin etmək əvəzinə, transform xüsusiyyətindən istifadə edə və translateY funksiyasından və -50% dəyərindən istifadə edərək daxili bloku yuxarı köçürə bilərsiniz.Xarici ( mövqe: nisbi; ) .daxili ( mövqe: mütləq; yuxarı: 50%; çevirmək: tərcüməY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
Niyə daxil əvvəlki üsul Dəyəri faiz olaraq təyin edə bilməzdiniz? Faiz marjası dəyərləri əsas elementə nisbətən hesablandığı üçün 50% dəyəri xarici qutunun hündürlüyünün yarısı olacaq və biz daxili qutunu öz hündürlüyünün yarısına qaldırmalıyıq. Transformasiya xüsusiyyəti bunun üçün mükəmməldir.
Bu metodun dezavantajı, daxili bölmənin mütləq yerləşdirməyə malik olması halında istifadə edilə bilməməsidir.
Flexbox ilə uyğunlaşdırma
Ən çox müasir yolşaquli hizalama Flexible Box Layout (xalq arasında Flexbox kimi tanınır) istifadə etməkdir. Bu modul, elementlərin səhifədə yerləşdirilməsinə çevik şəkildə nəzarət etməyə imkan verir, onları demək olar ki, hər yerdə təşkil edir. Flexbox üçün mərkəzə düzülmə çox sadə işdir.Xarici bloku göstərmək üçün təyin edilməlidir: flex və daxili blok kənara: auto . Və hamısı budur! Gözəl, elə deyilmi?
Xarici ( ekran: flex; en: 200px; hündürlük: 200px; ) .daxili ( en: 100px; kənar: avtomatik; )
http://jsfiddle.net/c1bgfffq/14/
Bu metodun dezavantajı Flexbox-un yalnız müasir brauzerlər tərəfindən dəstəklənməsidir.
Hansı üsulu seçməliyəm?
Problem ifadəsindən başlamaq lazımdır:- Mətni şaquli olaraq hizalamaq üçün şaquli abzaslardan və ya xətt hündürlüyündən istifadə etmək daha yaxşıdır.
- Məlum hündürlüyə malik (məsələn, nişanlar) tamamilə yerləşdirilmiş elementlər üçün metod mənfi xüsusiyyət margin-top.
- Daha mürəkkəb hallar üçün, blokun hündürlüyü naməlum olduqda, psevdo elementdən və ya transformasiya xüsusiyyətindən istifadə etməlisiniz.
- Yaxşı, IE brauzerinin köhnə versiyalarını dəstəkləməyə ehtiyacınız olmadığı üçün şanslısınızsa, əlbəttə ki, Flexbox-dan istifadə etmək daha yaxşıdır.
