internet Explorerəksər veb tərtibatçılarının həyatını məhv edən problemdir. İnkişaf vaxtının 60% -dən çoxu bu xüsusi problemlərin həllinə sərf edilə bilər, bu deyil səmərəli istifadə vaxt. Bu yazıda mən yerləşdirmədə ən populyar səhvlər və uyğunsuzluqlar, həmçinin bu problemlərin ən asan həlli haqqında danışacağam.

1. Mərkəzi yerləşdirmə.

Hər bir veb tərtibatçısı, veb saytını tərtib edərkən, mərkəzdə bir elementi uyğunlaşdırmaq ehtiyacı ilə qarşılaşdı. Ən sadə və məşhur yol- bu marja yazmaq üçündür: auto; . Bu üsul, ekranın qətnaməsindən asılı olmayaraq elementi mərkəzləşdirməyə imkan verir. Lakin bu üsul IE6-da işləmir.

Aşağıdakı kodu nəzərdən keçirin:

#konteyner ( haşiyə: bərk 1px #000; fon: #777; en: 400px; hündürlük: 160px; kənar: 30px 0 0 30px; ) #element ( fon: #95CFEF; haşiyə: bərk 1px #36F; en: 300px; hündürlük: 100px kənar: 30px avtomatik)

Gözlənilən nəticə:

Bununla belə, Internet Explorer sizə aşağıdakıları göstərəcək:

Bu, IE6-nın margin xassəsinə təyin edilmiş avtomatik dəyəri tanımaması səbəbindən baş verir. Xoşbəxtlikdən, bunu düzəltmək asandır.

Gəlin onu düzəldək.

Ən sadə və sübut edilmiş üsul IE6-da bir elementi mərkəzləşdirmək, əsas elementə text-alignL mərkəzini yazmaq və məzmununun düzgün düzülməsi üçün sola tex-align: tətbiq etməkdir.

#container( haşiyə: bərk 1px #000; fon: #777; en: 400px; hündürlük: 160px; kənar: 30px 0 0 30px; mətni düzün: mərkəz;) #element( fon: #95CFEF; haşiyə: bərk 1px #36F; en: 300px; hündürlük: 100px; kənar: 30px 0; mətni hizalayın: sola; }

2. Addım effekti

Demək olar ki, hər bir tərtibatçı naviqasiya yaratmaq üçün siyahılardan istifadə edir. Tipik olaraq, konteyner elementi yaradılır, lazımi keçidlər onun içərisindədir və sonra float xüsusiyyəti tələb olunan istiqamətlə təyin olunur. Aşağıdakı misalı nəzərdən keçirək:

Ul (siyahı üslubu: heç biri; ) ul li a (ekran: blok; en: 130px; hündürlük: 30px; mətn hizalanması: mərkəz; rəng: #fff; float: sol; fon: #95CFEF; haşiyə: bərk 1px # 36F; kənar: 30px 5px)

Aşağıdakıları alırıq:

Bununla belə, IE bizə göstərəcək:

Çox dost naviqasiya deyil, elə deyilmi? Ancaq bu xoşagəlməz davranışı düzəltməyin 2 yolu var.

1-ci üsul

Ən sadə yol, float xassəsini linklərə deyil, li siyahının elementlərinə təyin etməkdir.

Ul li ( float: sol; )

2-ci üsul

İkinci yol ekranı tətbiq etməkdir: li elementinə daxili xüsusiyyət. Bundan əlavə, biz aşağıda təsvir olunan ikiqat kənar ilə səhvi düzəldirik.

Ul li (göstəriş: daxili)

3. Float xassə dəsti olan elementlər üçün ikiqat abzas

Bu səhvi təkrarlamaq çox asandır. Elementi üzmək üçün təyin edin: sola və sonra doldurma. Nəticədə, göstəriləndən iki dəfə böyük bir girinti alırıq.

Bir misala baxaq:

#element( fon: #95CFEF; en: 300px; hündürlük: 100px; float: sol; kənar: 30px 0 0 30px; haşiyə: bərk 1px #36F; )

Gözlənilən nəticə:

Bununla belə, IE6-da biz aşağıdakıları görəcəyik:

Biz düzəldirik

Bu, addımların təsiri ilə bağlı problemlə eyni şəkildə düzəldilir. Yəni, element üçün displey: inline xassəsini təyin etdik. Kodumuz belə dəyişəcək:

#element( fon: #95CFEF; en: 300px; hündürlük: 100px; float: sol; kənar: 30px 0 0 30px; haşiyə: bərk 1px #36F; ekran: inline; }

4. Kiçik hündürlüyə malik elementlər.

Bəzən kiçik hündürlüyə malik elementlər yaratmaq lazımdır, məsələn, onları dizayn elementi kimi istifadə etmək lazımdır. Ağlıma gələn ilk yol hündürlüyü təyin etmək idi. Bununla belə, IE sizə nə gözlədiyinizi göstərməyəcək.

Nəticə hündürlüyü 2px və haşiyəsi 1px olan elementdir.

Gəlin onu düzəldək.

Bu səhvin səbəbi çox sadədir: IE sadəcə elementin hündürlüyünü şrift ölçüsünə bərabər hündürlüyə dəyişir. Beləliklə, biz sadəcə şriftin ölçüsünü sıfıra təyin etdik.

#element( fon: #95CFEF; haşiyə: bərk 1px #36F; en: 300px; hündürlük: 2px; kənar: 30px 0; şrift ölçüsü: 0; }

İkinci yanaşma

Başqa yaxşı yol- bu, daşqın xüsusiyyətindən istifadə etməkdir, gizli dəyəri tətbiq etməlisiniz. Və sonra element tələb olunan hündürlükdə olacaq.

#element( fon: #95CFEF; haşiyə: bərk 1px #36F; en: 300px; hündürlük: 2px; kənar: 30px 0; daşqın: gizli; }

5. Elementlərin daşması və nisbi yerləşdirilməsi.

Bu səhv, əsas elementdə daşqın olduqda görünür: avtomatik xüsusiyyət quruldu və uşaq ona nisbətən yerləşdi, yəni təyin edildi mövqe mülkiyyəti: qohum. Belə çıxır ki uşaq elementi sanki valideynin üstündə yerləşir. Bir misala baxaq:

#element( fon: #95CFEF; haşiyə: bərk 1px #36F; en: 300px; hündürlük: 150px; kənar: 30px 0; daşqın: avtomatik; ) #anotherelement( fon: #555; en: 150px; hündürlük: 175px; mövqe : nisbi kənar: 30px )

Gözlənilən nəticə:

IE-də nəticə:

Gəlin onu düzəldək.

Problemi həll etməyin ən sadə yolu ana elementi təyin etməkdir nisbi yerləşdirmə.

#element( fon: #95CFEF; haşiyə: bərk 1px #36F; en: 300px; hündürlük: 150px; kənar: 30px 0; daşqın: avtomatik; mövqe: nisbi; }

6. Qutu Modeli

Internet Explorer qutu modelini səhv şərh edir.

Məsələn, 2 var div elementi. Birində səhv düzəldildi, digəri yox. Onların arasında daxili yastıqların cəminə bərabər ölçü fərqi olacaq.

Biz düzəldirik

Düzgün model haqqında sizə başqa bir məqalədə məlumat verəcəyəm, amma indi onu necə düzəltməyi sizə göstərəcəyəm.

Məsələ ondadır ki, IE5/6 üçün hündürlük və eni ayrıca təyin etmək lazımdır. Məsələn, mən bunu belə edirəm:

Bütün brauzerlər üçün

#element( en: 400px; hündürlük: 150px; doldurma: 50px; )

IE üçün bunu etməlisiniz:

#element ( en: 400px; hündürlük: 150px; \hündürlük: 250px; \en: 500px )

Əslində siz IE6 üçün elementin ölçülərinə doldurma dəyərləri əlavə edirsiniz.

7. Minimum ölçülərin təyin edilməsi.

Minimum eni və hündürlüyü yerinə yetirərkən sadəcə əvəzolunmazdır Gözəl dizayn. Təəssüf ki, IE min-hündürlük və min-en xassələrinə məhəl qoymur.

Biz düzəldirik

Problemi həll etmək üçün, vacib identifikatordan istifadə edək.

#element ( min-hündürlük: 150px; hündürlük: avtomatik !vacib; hündürlük: 150px; )

İkinci variant.

IE-nin daxili seçiciləri başa düşmədiyini nəzərə alsaq, bunu edə bilərik:

#element ( min-hündürlük: 150px; hündürlük: 150px; ) html>bədən #element ( hündürlük: avtomatik; )

8. Float modelində düzgün olmayan davranış.

CSS-dən istifadə edən masasız tərtibatda ən vacib anlayışlardan biri floatdır. Çox vaxt IE6 bunu düzgün idarə edir, lakin bəzən problemlər olur. Məsələn, məzmun qırılmadıqda və ya elementin eni ananın enindən böyük olduqda. Bu hallarda işarələmə pozulur. Bir nümunəyə baxaq.

#element, #anotherelement( fon: #95CFEF; haşiyə: bərk 1px #36F; en: 100px; hündürlük: 150px; kənar: 30px; doldurma: 10px; float: sol; ) #container( fon: #C2DFEF; sərhəd: bərk 1px #36F; kənar: 30px: avtomatik;

IE-də əldə etdim:

Gördüyünüz kimi, birinci div məzmun genişliyinə uyğunlaşmaq üçün genişləndi və bitişik olanı növbəti sətirə itələdi.

Biz düzəldirik

Gözəl bir həll yoxdur. Ancaq məsələn, daşqın tətbiq edə bilərsiniz: gizli əmlak, lakin sonra məzmun kəsiləcək və onun bir hissəsi görünməyəcəkdir.

#element( fon: #C2DFEF; haşiyə: bərk 1px #36F; en: 365px; kənar: 30px; doldurma: 5px; daşqın: gizli; )

9. Siyahı elementləri arasında əlavə boşluq.

IE 6 şaquli siyahılara əlavə doldurma əlavə edir. Bir nümunəyə baxaq.

• Link 1
• Link 2
• Link 3

Ul ( kənar: 0; doldurma: 0; siyahı tərzi: heç biri; ) li a (fon: #95CFEF; ekran: blok; )

Nə kimi görünməlidir:

IE nə göstərir:

1-ci üsul

Ən asan yol, keçid üçün eni və ya hündürlüyü təyin etməkdir.

Li a (fon: #95CFEF; ekran: blok; eni: 200px; }

2-ci üsul

Növbəti yol float təyin etməkdir: sola və sonra onu təmizləyin.

Li a (fon: #95CFEF; float: sol; aydın: sol; }

3-cü üsul

Üçüncü yol ekranı təyin etməkdir: li elementində inline. Bu, yeri gəlmişkən, yuxarıda təsvir edilən ikiqat marja səhvini düzəldəcəkdir.

Blok elementini üfüqi olaraq mərkəzləşdirmək üçün margin:auto-dan istifadə yaxşıdır məlum üsul. Ancaq bunun necə işlədiyini heç düşünmüsünüzmü?

Avtomatik effekt elementin növündən və kontekstindən asılıdır. Üst doldurma üçün CSS avtomatik iki şeydən birini ifadə edə bilər: hər şeyi götürün boş yer və ya 0 piksel. Bundan asılı olaraq fərqli bir struktur təyin olunacaq.

"avtomatik" - bütün mövcud yeri tutmaq

Bu, girinti üçün avtomatik istifadə etməyin ən ümumi yoludur. Bir elementin sol və sağ doldurulması üçün avtomatik təyin etsək, onlar konteynerdə mövcud olan bütün üfüqi məkanı bərabər şəkildə tutacaqlar. Bu, elementi mərkəzdə yerləşdirəcəkdir.

Nümunəyə baxın

Bu, yalnız üfüqi doldurma üçün işləyir. Lakin üzən və daxili elementlər üçün işləməyəcək. Həm də mütləq və sabit şəkildə yerləşdirilmiş elementlər üçün.

Mövcud yer ayırmaqla üzən davranışı simulyasiya edin

avtomatik bütün boş yerləri sağ və sol kənarlar arasında bərabər paylayır. Bəs bu dəyəri paddinglərdən yalnız biri üçün təyin etsək nə olar? Sonra o, bütün mövcud yeri tutacaq və element sağa və ya sol kənara çəkiləcək.

Nümunəyə baxın

“avtomatik” — 0 piksel təyin edin

Yuxarıda qeyd edildiyi kimi, avtomatik üzən, daxili və ya tamamilə yerləşdirilmiş elementlər üçün işləmir. Onların artıq müəyyən edilmiş strukturu var, ona görə də avtomatik marjadan istifadə etməyin mənası yoxdur.

Bu, yalnız orijinal quruluşu pozacaq. Üstündəki mətni daxil etmək üçün CSS daxil olmaqla. Beləliklə, avtomatik bu elementlərin doldurulmasını 0 pikselə təyin edəcəkdir.

auto da standart blok elementində eni göstərilmədikcə işləməyəcək. Verdiyim bütün nümunələrdə elementlərin eni müəyyən edilmişdi.

Blok elementinin eni avtomatik və ya 100% olaraq təyin edildikdə avtomatik dəyər 0 piksel dolğunluğu müəyyən edəcək. Tipik olaraq o, konteynerin bütün enini tutur, ona görə də doldurma eni üçün 0 piksel qalacaq.

Avtomatik olaraq təyin edildikdə şaquli doldurma ilə nə baş verir?

həm CSS həm yuxarı, həm də aşağı doldurma üçün avtomatik həmişə 0 piksel kimi hesablanır ( tamamilə yerləşdirilmiş elementlər istisna olmaqla). W3C spesifikasiyası aşağıdakıları bildirir:

"Əgər "margin-top" və ya "margin-bottom" "auto" olaraq təyin edilibsə, onlar 0-a təyin edilir."

Bu, veb-səhifədə bütün elementlərin ən çox şaquli şəkildə paylanması ilə əlaqədardır. Buna görə də, konteynerdə elementin hündürlüyünü mərkəzləşdirməklə, üfüqi mərkəzləşdirmə zamanı olduğu kimi, onun səhifənin özünə nisbətən şaquli mərkəzləşdiyinə nail ola bilməyəcəyik.

Və ya bəlkə də eyni səbəbdən onlar ümumi səhifə hündürlüyünə nisbətən şaquli olaraq mərkəzləşdirilə bilən tamamilə yerləşdirilmiş elementlər üçün bir istisna əlavə etmək qərarına gəldilər.

Ya da ona görə abzasların birləşməsinin təsiri (girintiləri birləşdirir qonşu elementlər ). Bu başqa bir istisnadır bu qaydadanşaquli ofsetlərin müəyyən edilməsi.

Mütləq yerləşdirilmiş elementlərin mərkəzləşdirilməsi

Mütləq yerləşdirilmiş elementlər üçün istisna olduğundan, siz onları şaquli və üfüqi mərkəzləşdirmək üçün avtomatik istifadə edə bilərsiniz. Ancaq əvvəlcə margin:auto-nun CSS üst doldurulması üçün nə vaxt işləyəcəyini anlamaq lazımdır.

Başqa bir W3C spesifikasiyası deyir:

“Hər üç mövqe (“sol”, “en” və “sağ”) “avtomatik” olaraq təyin edilibsə, əvvəlcə “margin-left” və “margin-right” parametrlərini 0-a təyin edin...
» Əgər "avtomatik" yalnız "kənar-sol" və "sağ kənar" üçün göstərilibsə, tənliyi həll edin əlavə şərt belə ki, hər iki yastıq eyni genişliyə malikdir."

Üfüqi doldurma üçün avtomatik dəyərlə bağlı vəziyyət burada bir qədər ətraflı təsvir edilmişdir. Bu dolğunluqların eyni ölçüdə olmasını təmin etmək üçün sol , eni və sağı avtomatik olaraq təyin edilməməlidir ( onların standart dəyəri). Elementi üfüqi olaraq mərkəzləşdirmək üçün mütləq yerləşdirilmiş elementin eni üçün xüsusi dəyər təyin etməlisiniz və sol və sağ bərabər dəyərlərə malik olmalıdır.

Spesifikasiyada də qeyd olunub CSS div-in üst doldurulması üçün oxşar bir şey.

"Əgər "yuxarı", "hündürlük" və "aşağı" "avtomatik" olaraq təyin edilibsə, "yuxarı"nı statik olaraq təyin edin..."

"Üç mövqedən biri 'avtomatik' olaraq təyin edilməyibsə: Əgər 'yuxarı' və 'aşağı' 'avtomatik' olaraq təyin edilibsə, bu dolğuları eyni dəyərlərə təyin etmək üçün tənliyi əlavə şərtlə həll edin."

Buna görə də, tamamilə yerləşdirilmiş elementi şaquli mərkəzləşdirmək üçün yuxarı, hündürlük və aşağı avtomatik olaraq təyin edilməməlidir.

İndi bütün bunları bir araya gətirərək aşağıdakıları əldə edirik:

Nümunəyə baxın

Nəticə

Konteyner elementləri olmayan səhifədəki elementi sağa və ya sola köçürmək lazımdırsa ( məsələn, float vəziyyətində olduğu kimi), unutmayın ki, abzas üçün avtomatik istifadə edə bilərsiniz.

Elementi yalnız şaquli olaraq mərkəzləşdirmək üçün mütləq yerləşdirilmiş vəziyyətə çevirmək ( üst doldurma CSS), Yox ən yaxşı fikir. Bunun üçün daha uyğun olan flexbox və CSS transform kimi başqa variantlar var.

Məqalənin tərcüməsi " CSS - margin auto - Necə işləyir"dost layihə komandası tərəfindən hazırlanmışdır.

Yaxşı Pis

Təsvir

Elementin hər kənarından doldurma miqdarını təyin edir. Marja cari elementin sərhədindən onun əsas elementinin daxili sərhədinə qədər olan boşluqdur (şək. 1).

düyü. 1. Elementin sol kənarından girinti

Elementin valideyni yoxdursa, pəncərənin özündə də standart olaraq padding qoyulduğunu nəzərə alaraq, doldurma elementin kənarından brauzer pəncərəsinin kənarına qədər olan məsafə olacaq. Onlardan qurtulmaq üçün seçici üçün kənar dəyəri təyin etməlisiniz sıfıra bərabərdir.

Margin xassəsi bir anda elementin bütün tərəfləri üçün marja dəyərini təyin etməyə və ya onu yalnız müəyyən edilmiş tərəflər üçün təyin etməyə imkan verir.

Sintaksis

margin: [dəyər | maraq | auto] (1,4) | miras almaq

Dəyərlər

Siz boşluqla ayrılmış bir, iki, üç və ya dörd dəyərdən istifadə edə bilərsiniz. Təsir dəyərlərin sayından asılıdır və cədvəldə göstərilir. 1.

Girinti miqdarı piksel (px), faiz (%) və ya digər məqbul dəyərlərlə müəyyən edilə bilər. CSS vahidləri. Qiymət müsbət və ya mənfi ədəd ola bilər.

Auto Müəyyən edir ki, abzas ölçüsü avtomatik olaraq brauzer tərəfindən hesablanacaq. varis Valideyn dəyərini miras alır.

HTML5 CSS2.1 IE Cr Op Sa Fx

Nəticə bu misalŞəkildə göstərilmişdir. 2.

düyü. 2. Marja xassəsinin tətbiqi

Obyekt Modeli

document.getElementById("elementID ").style.margin

Brauzerlər

Qeyri-adi rejimdə olan Internet Explorer 6, marjadan istifadə edərək blokun mərkəzləşdirilməsini dəstəkləmir: 0 avtomatik qayda. Bu brauzerdə ana elementlər içərisində yerləşdirilmiş üzən elementlər üçün sol və ya sağ doldurma dəyərini ikiqat artıran bir səhv də var. Valideyn tərəfinə bitişik olan kənar ikiqat artır. Problem adətən üzən elementə displey: inline əlavə etməklə həll edilir.

Internet Explorer-in 7.0-a qədər olan versiyaları vərəsəlik dəyərini dəstəkləmir.

Qeyd

U blok elementlərişaquli olaraq bir-birinin yanında yerləşdikdə, girintilər yekunlaşdırılmadıqda, lakin bir-biri ilə birləşdirildikdə çökmə effekti müşahidə olunur. Çökmə özü iki və ya daha çox blokda (biri digərinin içərisinə daxil edilə bilər) yuxarıda və ya aşağıda girintilərlə hərəkət edir, bitişik abzaslar isə birinə birləşdirilir. Sol və sağ padding üçün çökmə heç vaxt tətbiq edilmir.

Yıxılma işləmir:

• padding xassəsinin çökən tərəfə təyin olunduğu elementlər üçün.
• çökən tərəfdə müəyyən edilmiş sərhədi olan elementlər üçün;
• olan elementlər üzərində mütləq yerləşdirmə, yəni. mövqeyi mütləq müəyyən edilmiş şəxslər;
• üzən elementlərdə (bunlar üçün float xüsusiyyəti sola və ya sağa təyin olunur);
• daxili elementlər üçün;
• üçün .

Ümumiyyətlə mərkəzləşdirmə HTML elementləri səhifədə - bu çətin məsələ deyil. Bəzi hallarda... veb tərtibatçıları ən yaxşı həlli tapmaq üçün beyinlərini sınamalı olurlar.

Elementləri üfüqi olaraq mərkəzləşdirmək o qədər də çətin deyil, bu, artıq suallar doğurur, lakin ümumiyyətlə onları birləşdirmək çıxılmaz ola bilər. Dövrdə adaptiv dizayn, biz nadir hallarda müəyyən elementlərin dəqiq ölçüləri haqqında aydın oluruq. 6 saydım müxtəlif yollarla ilə mərkəzləşdirmə elementləri CSS istifadə edərək. ilə başlayaq sadə nümunələr, daha mürəkkəb olanlarla bitirək. Eyni HTML kodu ilə işləyəcək:

Mətni hizalamaqdan istifadə edərək üfüqi düzülmə

Bəzən ən sadə həll ən yaxşısıdır:

Div.center (mətn hizalanması: mərkəz; fon: hsl(0, 100%, 97%); ) div.center img (en: 33%; hündürlük: avtomatik; )

Burada şaquli mərkəzləşdirmə yoxdur: bunun üçün div-ə margin-top və margin-bottom xassələrini əlavə etməlisiniz.

Marja ilə mərkəzləşdirmə: avtomatik

Üfüqi hizalama üçün başqa bir həll:

Div.center ( fon: hsl(60, 100%, 97%); ) div.center img ( ekran: blok; en: 33%; hündürlük: avtomatik; kənar: 0 avtomatik; )

Nəzərə alın ki, bu üsul üçün ekranı təyin etməlisiniz: blok xassəsi.

Cədvəl hüceyrəsindən istifadə edərək mərkəzləşdirmə

Display: table-cell-dən istifadə etməklə biz elementin həm şaquli, həm də üfüqi olaraq mərkəzləşdiyinə əmin ola bilərik. Ancaq burada təsviri başqa bir div elementinə yerləşdirməliyik.

Mərkəzə düzülmüş ( displey: cədvəl; fon: hsl(120, 100%, 97%); en: 100%; ) .center-core ( displey: table-cell; text-align: center; şaquli-align: orta; ) .center-core img (en: 33%; hündürlük: avtomatik; )

Hər şeyin düzgün işləməsi üçün div eni təyin edilməlidir: 100%. Elementi şaquli olaraq mərkəzləşdirmək üçün hündürlüyü təyin edərək standart üsullardan istifadə edəcəyik. IE8+ daxil olmaqla hər yerdə işləyir.

Mütləq uyğunlaşma

Çox maraqlı həll. İdeya budur ki, xarici qabın hündürlüyünü təyin etməlisiniz:

Mütləq düzülmüş ( mövqe: nisbi; minimum hündürlük: 500px; fon: hsl(200, 100%, 97%); ) .mütləq düzülmüş img ( en: 50%; min-en: 200px; hündürlük: avtomatik; daşqın : avtomatik; mövqe: yuxarı: 0;

Tərcümə istifadə edərək mərkəz

İstifadə olunan yerdə yeni həll CSS çevrilmələri. Həm üfüqi, həm də şaquli uyğunlaşma təmin edir:

Mərkəz ( fon: hsl(180, 100%, 97%); mövqe: nisbi; minimum hündürlük: 500px; ) .center img ( mövqe: mütləq; yuxarı: 50%; sol: 50%; çevirmək: tərcümə (-50) %, -50%); eni: 30%;

Bir sıra çatışmazlıqlar var:

• CSS transform xüsusiyyəti brauzer prefikslərini tələb edir
• IE-nin köhnə versiyalarında işləmir (8 və aşağı)
• Xarici konteynerə hündürlük verilməlidir.
• Konteynerin içərisində mətn varsa, bir az bulanıq ola bilər.

Çevik ekran növündən istifadə edərək mərkəzləşdirmə

Yəqin ki, ən sadə seçimdir.

Mərkəz (fon: hsl(240, 100%, 97%); displey: flex; əsaslandırma-məzmun: mərkəz; align-elementlər: mərkəz; ) .center img (en: 30%; hündürlük: avtomatik; )

IE-nin bütün versiyalarında işləmir (baxmayaraq ki, ekrandan istifadə etməklə özünüzü qoruya bilərsiniz: əlavə olaraq cədvəl hüceyrəsi). Tam CSS:

Mərkəz (fon: hsl(240, 100%, 97%); ekran: -webkit-box; /* Safari, iOS 6 və əvvəlki versiyalar; Android, köhnə WebKit */ displey: -moz-box; /* Firefox (səhv ola bilər) */ ekran: -ms-flexbox; /* IE 10 */ ekran: -webkit-flex; /* Chrome 21+ */ ekran: flex; /* Opera 12.1+, Firefox 22+ */ -webkit-box-align: mərkəz; -moz-box-align: mərkəz; -ms-flex-align: mərkəz; -webkit-align-elementlər: mərkəz; align-elementlər: mərkəz; -webkit-box-pack: mərkəz; -moz-box-pack: mərkəz; -ms-flex-pack: mərkəz; -webkit-justify-content: mərkəz; əsaslandırmaq-məzmun: mərkəz; )

Calc istifadə edərək mərkəzləşdirmə

Bəzi hallarda, bu üsul flexbox istifadə etməkdən daha çox yönlü:

Mərkəz ( fon: hsl(300, 100%, 97%); minimum hündürlük: 600px; mövqe: nisbi; ) .center img ( en: 40%; hündürlük: avtomatik; mövqe: mütləq; üst:calc(50% - 20% sol: calc(50% - 20%);

Çox sadədir, bütün səhifənin tərtibatından asılı olaraq bizə lazım olan ölçüləri hesablaya bilərik. Hesablamalar çox sadədir, 50% -dir mərkəzi nöqtə konteyner, ancaq bizim vəzifəmiz sola yerləşdirməkdir üst küncŞəkillər. Sonra, təsvirin hündürlüyünün və eninin yarısını çıxarın. Formula aşağıdakı kimidir:

Üst: calc(50% - (40% / 2)); sol: calc(50% - (40% / 2));

Praktikada bunu tapa bilərsiniz bu üsul elementlərin ölçülərini bilsək yaxşı işləyir:

Mərkəz img (en: 500px; hündürlük: 500px; mövqe: mütləq; yuxarı: hesablama(50% - (300px / 2)); sol: hesablama (50% - (300px - 2)); )

Bu üsul Firefox tərəfindən dəstəklənir, 4-cü versiyadan başlayaraq, brauzer prefikslərini qeydiyyatdan keçirməlisiniz. IE 8-də işləmir. Tam kod:

Mərkəz img (en: 40%; hündürlük: avtomatik; mövqe: mütləq; yuxarı: -webkit-calc(50% - 20%); sol: -webkit-calc(50% - 20%); yuxarı: -moz-calc (50% - 20%) sol: -moz-calc(50% - 20%): calc(50% - 20%);

Ümid edirəm ki, bu üsullar özünüz üçün ən yaxşı həlli tapmaq üçün kifayətdir.