Şəkillər məlumatı vizual olaraq cəlbedici şəkildə çatdıra bildiyi üçün veb məzmunun yaradılmasında vacib komponentdir. Şəkilləri HTML səhifəsinə daxil edərkən vizual olaraq balanslaşdırılmış təqdimat üçün onların düzülməsini və düzgün mərkəzləşdirilməsini təmin etmək vacibdir. Bu yazıda biz HTML-də şəkillərin mərkəzləşdirilməsi prosesini ətraflı araşdıracağıq və bu texnikanı mənimsəmənizə kömək etmək üçün praktiki nümunələr təqdim edəcəyik. Şəkillərinizin görünüşünü yaxşılaşdırmağa hazır olun layihələrinizdə veb!
1. HTML-də təsvirin uyğunlaşdırılmasına giriş
HTML-də şəkillərin düzülməsi veb səhifələrin dizaynı zamanı vacib aspektdir. Düzgün düzülmüş şəkil daha xoş və peşəkar istifadəçi təcrübəsi təmin edərək, səhifənin görünüşünü və vizual axını yaxşılaşdıra bilər.
HTML-də şəkilləri düzləşdirməyin bir neçə yolu var. Ən ümumi olanı "mərkəz", "sol" və ya "sağ" dəyəri ilə "text-align" CSS xüsusiyyətindən istifadə etməkdir. Bu, şəkli əhatə edən mətnin mərkəzinə, soluna və ya sağına uyğunlaşdıracaq. Misal üçün:
«`
«`
HTML "align" teqindən istifadə edərək şəkilləri uyğunlaşdırmaq da mümkündür. Bu teq "sol", "sağ" və "mərkəz" dəyərlərini qəbul edir, lakin HTML5-dən bəri köhnəlmiş hesab olunur. Buna görə də əvəzinə CSS-dən istifadə etmək tövsiyə olunur. Bununla belə, köhnə brauzerləri dəstəkləmək lazımdırsa, yenə də align etiketindən istifadə edə bilərsiniz. Misal üçün:
«`
«`
Unutmayın ki, görmə qabiliyyəti zəif olanlar üçün alternativ təsvir təmin etmək üçün şəkillərinizdə “alt” atributlarından istifadə etmək vacibdir. Həmçinin, hizalanmaların həddindən artıq istifadəsindən çəkinin, çünki bu, səhifənizin oxunaqlılığına və strukturuna mənfi təsir göstərə bilər. Fərqli seçimlərlə sınaqdan keçirin və dizaynınıza ən uyğun olan düzülüşü tapın.
2. HTML-də Şəkil Alignmentinin Əsasları
Onlar dizayn edərkən nəzərə alınmalı olan əsas aspektdir veb sayt. Şəkillərin düzgün uyğunlaşdırılması səhifənin vizual görünüşünü və istifadəçi təcrübəsini yaxşılaşdıra bilər. HTML-də şəkilləri hizalamaq üçün aşağıdakı addımlar verilmişdir:
1. ` teqindən istifadə edin` şəkli HTML kodunuza daxil etmək üçün. Serverinizdə şəklin yolunu göstərmək üçün `src` atributunu təyin etməyinizə əmin olun. Şəklin ölçüsünü tənzimləmək üçün siz "en" və "hündürlük" atributlarından istifadə edə bilərsiniz. Misal üçün:
"`html
«`
2. Şəkli üfüqi düzləndirmək üçün `teqdə `align` atributundan istifadə edə bilərsiniz`. Bu atribut `»sol»`, `»sağ»` və `»mərkəz»` dəyərlərini dəstəkləyir. Misal üçün:
"`html
«`
3. Şəkli şaquli düzləndirmək istəyirsinizsə, ` teqində `şaquli-align` atributundan istifadə edə bilərsiniz.`. Bu atribut `»yuxarı»`, `»orta»` və `»aşağı»` dəyərlərini dəstəkləyir. Misal üçün:
"`html
«`
Bunlar onlardan yalnız bəziləridir. Unutmayın ki, veb səhifənizdəki şəkillərin görünüşünə daha çox fərdiləşdirmə və nəzarət üçün CSS-dən də istifadə edə bilərsiniz. İstədiyiniz nəticəni əldə etmək üçün atributların və üslubların müxtəlif birləşmələri ilə sınaqdan keçirin.
3. Şəkilləri uyğunlaşdırmaq üçün HTML teqləri
HTML teqləri veb səhifənin dizaynı və strukturu üçün əsas vasitədir. Onların təklif etdiyi xüsusiyyətlərdən biri şəkilləri dəqiq şəkildə uyğunlaşdırmaq imkanıdır. Bu bölmədə bu məqsədə çatmaq üçün ən çox istifadə olunan etiketlər araşdırılacaq.
İstifadə edə biləcəyimiz ilk etiketdir . Bu etiket bizə veb səhifəmizə şəkil daxil etməyə imkan verir. Şəkli üfüqi hizalamaq üçün align atributundan "sol" və ya "sağ" dəyərləri ilə istifadə edə bilərik. Məsələn, bir şəkli sola düzəltmək istəsək, kodu istifadə edə bilərik
. Onu sağa düzmək istəyiriksə, "sol" əvəzinə "sağ" dəyərindən istifadə edirik.
Şəkilləri hizalamaq üçün başqa bir seçim etiketdən istifadə etməkdir
. Beləliklə, şəkil div daxilində mərkəzə uyğunlaşdırılacaq.
Nəhayət, etiketdən də istifadə edə bilərik
.
4. CSS üslublarından istifadə edərək şəkilləri necə mərkəzləşdirmək olar
CSS üslublarından istifadə edərək şəkilləri mərkəzləşdirməyin bir çox yolu var. Aşağıda buna nail olmaq üçün geniş istifadə olunan üç üsul var:
1. Avtomatik marja: Şəkli mərkəzləşdirməyin asan yolu, sol və sağ tərəflərə avtomatik haşiyə tətbiq etməkdir. Buna aşağıdakı CSS qaydasından istifadə etməklə nail olmaq olar: margin: 0 auto;. Bu xüsusiyyət ilə şəkil öz konteynerinin üfüqi mərkəzinə yerləşdiriləcək.
2. Fleksboks: Şəkilləri mərkəzləşdirmək üçün başqa təsirli üsul flexboxdan istifadə etməkdir. Əsas konteynerə aşağıdakı CSS qaydalarını tətbiq etməklə: display: flex; y justify-content: center;, şəkil konteynerin üfüqi mərkəzində yerləşdiriləcək. Qeyd edək ki, bu halda konteyner sabit eni və ya 100% eni olmalıdır.
3. Çevirmək: CSS transform xüsusiyyəti şəkilləri mərkəzləşdirmək üçün də istifadə edilə bilər. Buna nail olmaq üçün şəkilə aşağıdakı CSS qaydası tətbiq oluna bilər: transform: translateX(-50%);. Bu, şəkli konteynerdə mərkəzləşdirərək, eninin 50% sola keçirəcək. Bundan əlavə, konteynerin mülkiyyətə malik olmasını təmin etmək vacibdir position: relative; çevrilmənin düzgün tətbiq olunması üçün.
Unutmayın ki, bunlar yalnızdır bəzi nümunələr CSS istifadə edərək şəkilləri necə mərkəzləşdirmək olar. Metodları hər bir layihənin xüsusi ehtiyaclarına uyğunlaşdırmaq və müxtəlif brauzerlərlə uyğunluğu nəzərə almaq vacibdir.
5. Şəkilləri HTML-də mərkəzləşdirmək üçün CSS xüsusiyyətlərindən istifadə
Şəkilləri HTML-də mərkəzləşdirmək üçün müxtəlif CSS xüsusiyyətlərindən istifadə edilə bilər. Aşağıda ən ümumi olanlardan bəziləri verilmişdir:
1. “Flex” dəyəri olan “ekran” xassəsi şəkil konteynerinə onu üfüqi və şaquli olaraq mərkəzləşdirmək üçün tətbiq oluna bilər. Misal üçün:
"`html
«`
2. Digər variant isə şəkil konteynerində “mərkəz” dəyəri ilə birlikdə “text-align” xassəsindən istifadə etməkdir. Bu texnika şəkli yalnız üfüqi olaraq mərkəzləşdirir. Misal üçün:
"`html
«`
3. Şəkli yalnız üfüqi olaraq mərkəzləşdirmək istəyirsinizsə, şəkil konteynerinin sol və sağ tərəflərində "auto" dəyərləri olan "margin" xüsusiyyətindən istifadə edə bilərsiniz. Belə ki:
"`html
«`
Bunlar CSS xassələrindən istifadə edərək HTML-də şəkilləri mərkəzləşdirməyin yollarından yalnız bir neçəsidir. Quruluşundan asılı olaraq veb sayt və xüsusi tələblərdən ən uyğun texnika seçilə bilər. Unutmayın ki, bu həllər hər bir layihənin dizaynına və üslubuna uyğun olaraq dəyişdirilə və düzəldilə bilər və sizin üçün ən yaxşı variantı tapın!
6. HTML-də Qabaqcıl Şəkil Mərkəzləşdirmə Metodları
HTML-də şəkilləri dəqiq və idarə olunan şəkildə mərkəzləşdirmək üçün istifadə edilə bilən bir neçə qabaqcıl üsul var. Bu üsullar veb-dizaynerə vizual olaraq cəlbedici görünüş əldə etməyə və şəkillərin ətrafdakı məzmunla düzgün uyğunlaşdırılmasını təmin etməyə imkan verir.
Tez-tez istifadə olunan üsul, şəkil genişliyini təyin etməklə birlikdə "margin: auto" CSS xüsusiyyətindən istifadə etməkdir. Buna nail olmaq üçün sadəcə olaraq şəkil üçün sabit eni təyin edin və sonra ona “margin: auto” xassəsini tətbiq edin. Bu, şəkli öz konteynerində üfüqi olaraq mərkəzləşdirəcək.
Şəkilləri mərkəzləşdirməyin başqa bir qabaqcıl üsulu flexbox-dan istifadə etməkdir. Flexbox, konteyner daxilindəki elementlərin avtomatlaşdırılmış şəkildə düzülməsinə və düzülməsinə imkan verən çevik yerləşdirmə modelidir. Flexbox-dan istifadə edərək şəkli mərkəzləşdirmək üçün şəkli konteynerə bükməli və konteynerə aşağıdakı CSS xüsusiyyətlərini tətbiq etməlisiniz: "display: flex", "justify-content: center" və "align-items: center". Bu, şəkli konteynerin ortasında həm şaquli, həm də üfüqi olaraq hizalayacaq.
Bu üsullara əlavə olaraq, HTML-də şəkilləri mərkəzləşdirmək üçün istifadə edilə bilən digər qabaqcıl üsullar da var, məsələn, "mövqe: mütləq" xassəsinin "yuxarı: 50%" və "sol: 50%" dəyərləri ilə birlikdə istifadəsi, Şəkilin yerini düzgün dəyişdirmək üçün CSS çevrilməsi. Bununla belə, bu üsullar daha mürəkkəbdir və CSS haqqında daha dərin bilik tələb edir. Bir sözlə, onlar veb səhifənin vizual görünüşünü əhəmiyyətli dərəcədə yaxşılaşdıraraq, şəkillərin uyğunlaşdırılmasında daha çox fərdiləşdirmə və dəqiqliyə imkan verir.
7. HTML-də şəkilləri mərkəzləşdirərkən ümumi problemləri həll edin
HTML-də şəkilləri mərkəzləşdirərkən bir neçə ümumi problem var, lakin xoşbəxtlikdən, onların hər biri üçün sadə və effektiv həllər var. HTML kodunuzda şəklin düzgün uyğunlaşdırılmasında problem yaşayırsınızsa, problemi həll etmək üçün bu addımları yerinə yetirin:
1. Şəkli konteyner daxilində mərkəzləşdirmək üçün “text-align” CSS xassəsindən istifadə edin. CSS selektorunda şəkil konteynerinə uyğun gələn "text-align" xüsusiyyətinə "mərkəz" dəyərini tətbiq etməyinizə əmin olun. Misal üçün:
"`html
«`
2. Şəkil hələ də ortada deyilsə, onun eninin konteynerin enindən az və ya ona bərabər olduğunu yoxlayın. Müvafiq selektorda CSS eni xassəsindən istifadə edərək şəklin enini təyin edə bilərsiniz. Misal üçün:
"`html
«`
3. Şəkil konteynerdən böyükdürsə və siz onun avtomatik sığmasını istəyirsinizsə, “100%” dəyəri ilə “max-width” CSS xüsusiyyətindən istifadə edə bilərsiniz. Bu, aspekt nisbətini itirmədən şəklin konteynerə uyğun olması üçün kiçildilməsinə imkan verəcək. Misal:
"`html
«`
Bu addımları yerinə yetirməklə siz HTML-də şəkilləri mərkəzləşdirərkən əksər problemləri həll edə biləcəksiniz. Seçiciləri və fayl adlarını öz kodunuza uyğunlaşdırmağı unutmayın. Şəkillər hələ də düzgün uyğun gəlmirsə, mümkün səhvlər üçün kodunuzu yoxlayın və CSS üslublarının düzgün tətbiq olunduğundan əmin olun.
8. Şəkilləri HTML-də mərkəzləşdirərkən əlçatanlığın nəzərə alınması
Şəkilləri HTML-də mərkəzləşdirərkən diqqət yetirilməli vacib məqam səhifənin bütün insanlar, o cümlədən görmə qüsuru olanlar üçün əlçatan olmasını təmin etməkdir. HTML-də şəkilləri mərkəzləşdirərkən lazımi əlçatanlığı əldə etməyə kömək edən bir neçə üsul var.
Bunun bir yolu şəkil teqlərində alternativ (alt) atributlardan istifadə etməkdir. Alt atributu təsviri yükləmədikdə və ya ekran oxuyucusu tərəfindən oxunduqda göstərilən təsviri mətni təmin edir. Şəklin dəqiq təsvirini vermək vacibdir ki, onu görə bilməyən insanlar onun məzmununu başa düşə bilsinlər.
Başqa bir məsələ HTML-də semantik teqlərin istifadəsidir. Şəkilləri mərkəzləşdirərkən, kimi müvafiq etiketlərdən istifadə etmək məsləhətdir
Əlçatanlıq alətləri və damalardan istifadə edərək səhifənin əlçatanlığını yoxlamaq vacibdir. Bu alətlər potensial problemləri aşkarlaya və əlçatanlığı yaxşılaşdırmaq üçün təkliflər verə bilər. Həm də yadda saxlamaq lazımdır ki, şəkilləri mərkəzləşdirmək üçün istifadə olunan rənglər bütün insanlara, xüsusən də görmə qüsuru olanlara görünməsini təmin etmək üçün kifayət qədər kontrasta malik olmalıdır. Bu əlçatanlıq mülahizələrinə əməl etməklə siz HTML mərkəzli şəkillərin bütün istifadəçilər üçün əlçatan və başa düşülən düzgün təqdimatına nail ola bilərsiniz.
9. HTML-də şəkillərin mərkəzləşdirilməsi üçün ən yaxşı təcrübələr
Şəkillərin HTML-də mərkəzləşdirilməsi veb səhifələrin dizaynı zamanı ümumi işdir. Aşağıda şəkillərinizin effektiv mərkəzləşdirilməsi üçün bəzi ən yaxşı təcrübələr verilmişdir.
1. Etiketdən istifadə edin Şəkillərinizi səhifəyə daxil etmək üçün HTML. Teqin src atributunda şəklin düzgün yolunu göstərdiyinizə əmin olun. Misal üçün:
.
2. Şəkli üfüqi olaraq mərkəzləşdirmək üçün siz "avtomatik" və "ekran" dəyərləri "blok" olaraq təyin edilmiş "margin" CSS xüsusiyyətindən istifadə edə bilərsiniz. Bu şəkildə şəkil konteynerin ortasına yerləşdiriləcək. Stil faylınıza aşağıdakı CSS kodunu əlavə edin: img { display: block; kənar-sol: özü; kənar-sağ: özü; }
3. Şəkli həm üfüqi, həm də şaquli olaraq mərkəzləşdirmək istəyirsinizsə, flexbox metodundan istifadə edə bilərsiniz. Şəkil konteynerinə aşağıdakı CSS qaydalarını tətbiq edin: .container { display: flex; əsaslandırmaq-məzmun: mərkəz; align-elementlər: mərkəz; }. Bu yanaşma ilə şəkil öz konteyneri daxilində həm üfüqi, həm də şaquli olaraq mərkəzə yerləşdiriləcək.
Unutmayın ki, səhifənizdə mərkəzləşdirilmiş şəkillərdən istifadə görünüşü və istifadəçi təcrübəsini yaxşılaşdırmağa kömək edə bilər. Bu təcrübələrə əməl etməklə siz HTML şəkilləriniz üçün effektiv və cəlbedici mərkəzləşdirmə əldə edə biləcəksiniz. Fərqli üsulları sınamaqdan və onları xüsusi ehtiyaclarınıza uyğun tənzimləməkdən çəkinməyin!
10. Müxtəlif cihazlarda və ekranlarda şəkilləri uyğunlaşdırmaq üçün strategiyalar
Veb saytı hazırlayarkən diqqət yetirilən əsas məsələlərdən biri də şəkillərin düzgün şəkildə düzülməsinə əmin olmaqdır fərqli cihazlar və ekranlar. Bu, istifadəçilər tərəfindən istifadə edilən cihazların ola biləcəyi müxtəlif ölçülərə və qətnamələrə görə xüsusilə vacibdir. Aşağıda düzgün görüntü uyğunlaşmasına nail olmaq üçün on strategiya verilmişdir müxtəlif cihazlarda və ekranlar:
1. Media sorğularından istifadə edin: Media sorğuları cihazın xüsusiyyətlərinə uyğun olaraq xüsusi CSS üslublarını tətbiq etməyə imkan verir. Onlar müxtəlif ekran ölçülərində şəkillər üçün müxtəlif ölçüləri, mövqeləri və kənarları təyin etmək üçün istifadə edilə bilər.
2. Faizlərdən və ya nisbi vahidlərdən istifadə edin: Şəkillərin ölçüsünü müəyyən etmək üçün piksel kimi sabit ölçülərdən istifadə etmək əvəzinə, faizlərdən və ya "em" və ya "rem" kimi nisbi vahidlərdən istifadə etmək məsləhətdir. Bu bölmələr ekran ölçüsünə əsasən avtomatik olaraq tənzimlənəcək və görüntünün düzgün uyğunlaşdırılmasını təmin edəcək.
3. Cavab verən şəkillərdən istifadə edin: Cavab verən şəkillər avtomatik olaraq ekran ölçüsünə əsasən tənzimlənir və onların müxtəlif cihazlarda düzgün düzülməsini təmin edir. Buna nail olmaq üçün HTML-də "srcset" atributundan və ya CSS-də "background-size" xüsusiyyətindən istifadə kimi üsullardan istifadə edilə bilər.
4. Şəkillərin ölçüsünü və formatını optimallaşdırın: Şəkillərin ölçüsünü və formatını optimallaşdırmaq vacibdir ki, müxtəlif cihazlara sürətlə yüklənsin. Şəkil sıxma vasitələrindən istifadə etmək və keyfiyyət və fayl ölçüsü arasında yaxşı əlaqə təklif edən JPEG və ya WebP kimi formatlardan istifadə etmək tövsiyə olunur.
5. Fərqli cihazlarda və brauzerlərdə sınaqdan keçirin: Şəkillərin düzgün düzülməsinə əmin olmaq üçün bütün cihazlarda və brauzerlər üçün geniş sınaq tələb olunur. Potensial hizalanma problemlərini müəyyən etmək üçün müxtəlif ekran ölçülərində, mobil cihazlarda və populyar brauzerlərdə sınaqdan keçirmək tövsiyə olunur.
6. Cavab verən çərçivələr və ya kitabxanalardan istifadə edin: Müxtəlif cihazlarda şəkillərin uyğunlaşdırılması prosesini asanlaşdıra bilən müxtəlif cavab verən çərçivələr və kitabxanalar mövcuddur. Bəzi məşhur seçimlər Bootstrap, Foundation və Bulmadır ki, onlar müxtəlif ekran ölçülərində düzgün nümayiş üçün optimallaşdırılmış əvvəlcədən təyin edilmiş komponentlər və üslublar təklif edir.
7. Şəkillərin əlçatan olduğundan əmin olun: Veb saytı tərtib edərkən əlçatanlığı nəzərə almaq vacibdir və bu, şəkillərə də aiddir. Şəklin yüklənə bilməməsi və ya ekran oxuyucusu tərəfindən oxunması mümkün olmadıqda, təsviri alternativ mətn təqdim etmək üçün şəkil teqlərində "alt" atributundan istifadə etməyiniz tövsiyə olunur.
8. Şəkillərin məcburi düzülməsindən çəkinin: Şəkillərin hizalanmasını məcbur edən CSS üslublarından istifadə etməmək məsləhətdir, çünki bu, müxtəlif cihazlarda və ekranlarda problemlər yarada bilər. Nisbi ölçmələrdən istifadə etmək və şəkillərin ekran ölçüsünə əsasən təbii şəkildə tənzimlənməsinə icazə vermək üstünlük təşkil edir.
9. Mənfi məkanı nəzərdən keçirin: Ağ boşluq kimi də tanınan mənfi boşluq şəkillərin düzgün uyğunlaşdırılmasını təmin etmək üçün vacibdir. Müxtəlif cihazlarda və ya ekranlarda baxıldıqda onların kəsilməsinin və ya yanlış hizalanmasının qarşısını almaq üçün şəkillərin ətrafında adekvat kənar boşluqlar buraxmaq məsləhətdir.
10. Daim nəzarət edin və tənzimləyin: Müxtəlif cihazlarda və ekranlarda şəkillərin düzülüşü və düzülməsi davamlı bir prosesdir. Şəkillərinizin bütün cihazlarda düzgün görünməsini təmin etmək üçün onların tərtibatını daim izləmək və tənzimləmək və lazım olduqda dəyişikliklər etmək vacibdir.
Bu strategiyalarla müxtəlif cihazlarda və ekranlarda şəkillərin düzgün uyğunlaşdırılmasına nail olmaq mümkündür. Bu addımları izləmək, veb saytınızın ziyarətçilərinin hansı cihazdan istifadə etməsindən asılı olmayaraq optimal istifadəçi təcrübəsini təmin edəcək.
11. HTML-də Şəkillərin Hizalanması üçün Faydalı Alətlər və Resurslar
HTML-də şəkilləri dəqiq uyğunlaşdırmaq çətin ola bilər, lakin bu prosesi asanlaşdıra biləcək bir neçə faydalı alət və resurs var. Aşağıda HTML-də şəkilləri uyğunlaşdırmağa kömək edəcək bəzi üsul və üsullar verilmişdir effektiv şəkildə:
1. “Text-align” CSS xassəsindən istifadə: Siz “text-align” CSS xassəsindən istifadə edərək şəkilləri mətnlə uyğunlaşdıra bilərsiniz. Bunu etmək üçün şəkli div kimi blok elementinə sarın və sonra konteynerə "text-align" xassəsini tətbiq edin. Məsələn, bir şəkli sola uyğunlaşdırmaq istəyirsinizsə, aşağıdakı kodu istifadə edə bilərsiniz:
"`html
«`
2. “Float” CSS xassəsindən istifadə edin: Başqa bir seçim HTML-də şəkilləri düzləşdirmək üçün “float” CSS xassəsindən istifadə etməkdir. Siz müvafiq olaraq "sol" və "sağ" dəyərlərindən istifadə edərək şəkli sola və ya sağa süzə bilərsiniz. Misal üçün:
"`html
«`
3. Şəkilləri Flexbox ilə uyğunlaşdırın: Əgər daha çevik və dinamik uyğunlaşma istəyirsinizsə, Flexbox-dan istifadə edə bilərsiniz. Flexbox elementlərin düzülüşü və düzülüşü üzərində daha təkmil nəzarət etməyə imkan verən CSS layout modelidir. CSS flexbox xassələrindən istifadə edərək hizalanmanı həm üfüqi, həm də şaquli olaraq tənzimləyə bilərsiniz. Şəkli üfüqi şəkildə hizalamaq üçün Flexbox-dan necə istifadə etməyin əsas nümunəsi:
"`html
«`
12. HTML-də təsvirin mərkəzləşdirilməsinin praktiki nümunələri
Bu yazıda biz sizə HTML-də şəkilləri mərkəzləşdirməyin 12 praktik nümunəsini təqdim edəcəyik. Şəkillərin necə mərkəzləşdirilməsini bilmək, veb səhifələrin və ya bloqların dizaynına gəldikdə faydalıdır, çünki məzmunun vizual görünüşünü və oxunuşunu yaxşılaşdırır. Sonra bu effekti əldə etməyin müxtəlif üsullarını sizə göstərəcəyik.
1. Şəkili HTML atributları ilə mərkəzləşdirin: Şəkli mərkəzləşdirməyin ən əsas üsulu HTML "align" və "style" atributlarından istifadə etməkdir. Məsələn, HTML kodunuzun img elementinə aşağıdakı kod sətrini əlavə edə bilərsiniz: align=”center”. Bu, şəkli səhifədə üfüqi olaraq mərkəzləşdirəcək.
2. CSS ilə şəkli mərkəzləşdirin: Şəkili mərkəzləşdirməyin başqa bir yolu CSS-dən istifadə etməkdir. Siz mərkəzləşdirmək istədiyiniz şəkillər üçün xüsusi bir CSS sinfi yarada və sonra onu HTML kodundakı img elementinə tətbiq edə bilərsiniz. Məsələn, aşağıdakı CSS kodundan istifadə edə bilərsiniz:
«`
«`
Sonra, HTML kodunuzda img elementinə “center-image” sinfini əlavə edin:
«`
«`
3. Flexbox-dan istifadə edərək şəkli mərkəzləşdirin: Flexbox, elementlərin mövqeyinə və düzülməsinə daha çox nəzarət etməyə imkan verən veb səhifələrin dizaynı üçün qabaqcıl texnikadır. Flexbox istifadə edərək şəkli mərkəzləşdirmək üçün onu konteynerə bükməli və sonra konteynerə bəzi CSS xassələrini tətbiq etməlisiniz. Məsələn, aşağıdakı CSS kodunu əlavə edə bilərsiniz:
«`
«`
Sonra, HTML kodunuzda şəklinizi konteynerə sarın:
«`
«`
Bunlar HTML-də şəkilləri mərkəzləşdirməyin bir neçə nümunəsidir. Metod seçimi ehtiyaclarınızdan və üstünlüklərinizdən asılı olacaq. Onları sınayın və layihənizə ən uyğun olanı tapmaq üçün sınaqdan keçirin. Veb dizaynınızda uğurlar!
13. HTML-də şəkillərin mərkəzləşdirilməsi zamanı performansın optimallaşdırılması
HTML-də şəkilləri mərkəzləşdirərkən performansı optimallaşdırmaq üçün istifadə edilə bilən bir neçə üsul var. Aşağıda buna nail olmağa kömək edəcək bəzi variantları təqdim edəcəyik səmərəli şəkildə:
Birincisi, şəkli mərkəzləşdirməyin ümumi yolu ` teqindən istifadə etməkdir
Alternativ olaraq, şəkli mərkəzləşdirmək üçün CSS üslublarından istifadə etmək olar. Şəkilə `display: block` xassəsini tətbiq edə və sonra onu həm üfüqi, həm də şaquli olaraq mərkəzləşdirmək üçün avtomatik dəyərlərlə `margin` xüsusiyyətindən istifadə edə bilərsiniz. Misal üçün:
"`html
«`
Başqa bir seçim, elementləri çevik şəkildə yaymağa və mərkəzləşdirməyə imkan verən CSS dizayn texnikası olan flexbox-dan istifadə etməkdir. Flexbox ilə şəkli mərkəzləşdirmək üçün aşağıdakı kodu istifadə edə bilərsiniz:
"`html
«`
Bunlar HTML-də şəkilləri mərkəzləşdirməyin bir neçə üsuludur səmərəli yol. Performansı optimallaşdırmağın vacib olduğunu unutmayın veb saytınız, buna görə ehtiyaclarınıza və dizayn tələblərinizə əsaslanaraq ən uyğun texnikalardan istifadə etməyi tövsiyə edirik.
14. HTML-də şəkillərin mərkəzləşdirilməsi üçün nəticələr və yekun tövsiyələr
Şəkilləri HTML-də mərkəzləşdirmək üçün istifadə edə biləcəyiniz bir neçə yol var. Aşağıda bu məqsədə çatmaq üçün bəzi yekun nəticələr və tövsiyələr verilmişdir.
Birincisi, bir seçim CSS-də "text-align" xüsusiyyətindən istifadə etməkdir. Siz bu xassəni şəklin konteyner elementinə tətbiq edə bilərsiniz, onun dəyərini "mərkəz" olaraq təyin edə bilərsiniz. Beləliklə, şəkil öz konteyneri daxilində üfüqi olaraq mərkəzə yerləşdiriləcək.
Başqa bir alternativ "div" etiketindən istifadə etməkdir yaratmaq şəkil üçün konteyner və xüsusi CSS üslublarını tətbiq edin. Şəkli üfüqi olaraq mərkəzləşdirmək üçün siz konteynerin sol və sağ kənarını "avtomatik" olaraq təyin edə və şəklin eninin konteynerin enindən çox olmamasına əmin ola bilərsiniz. Əlavə olaraq, onu şaquli olaraq mərkəzləşdirmək üçün siz “flex” dəyəri ilə “ekran” xassəsindən və “mərkəz” dəyəri ilə “align-items” xüsusiyyətindən istifadə edə bilərsiniz.
Nəhayət, əgər siz HTML elementində fon şəklini mərkəzləşdirmək istəyirsinizsə, CSS-də fon mövqeyi xüsusiyyətindən istifadə edə bilərsiniz. Şəkli həm üfüqi, həm də şaquli olaraq mərkəzləşdirmək üçün "mərkəz mərkəzi" dəyərlərini təyin edə bilərsiniz. Həmçinin, şəklin fonda təkrarlanmasını istəyirsinizsə, “repeat yoxdur” dəyəri ilə “background-repeat” xassəsindən istifadə edə bilərsiniz.
Qısacası, HTML-də şəkilləri mərkəzləşdirmək üçün siz CSS-də mətn hizalama xüsusiyyətindən istifadə edə, xüsusi CSS üslubları ilə konteyner yarada və ya fon şəkilləri üçün fon mövqeyi xüsusiyyətindən istifadə edə bilərsiniz. Bu seçimlər sizə istədiyiniz effekti əldə etməyə və veb saytınızdakı vizual elementlərinizin görünüşünü yaxşılaşdırmağa imkan verəcək.
Nəticə olaraq, HTML-də şəkillərin mərkəzləşdirilməsi müvafiq xassələrdən və atributlardan istifadə etməklə yerinə yetirilə bilən nisbətən sadə bir işdir. Bu məqalə boyu biz align atributundan CSS üslublarından istifadəyə qədər HTML-də şəkillərin mərkəzləşdirilməsi üçün müxtəlif üsulları araşdırdıq.
Hər bir metodun özünəməxsus ola biləcəyini xatırlamaq vacibdir üstünlükləri və çatışmazlıqları vəziyyətdən və hər bir layihənin xüsusi ehtiyaclarından asılı olaraq. Bundan əlavə, müxtəlif brauzerlər və HTML versiyaları ilə uyğunluq nəzərə alınmalıdır.
Şəkilləri mərkəzləşdirərkən HTML teqləri və atributlarını, həmçinin dizayn və tərtibatın əsaslarını yaxşı başa düşmək vacibdir. Eynilə, yaxşı təcrübələrə sahib olmaq çox vacibdir veb inkişaf saytın səmərəliliyini və performansını təmin etmək.
Unutmayın ki, şəkillərin mərkəzləşdirilməsi yaratmaq və dizayn etmək üçün lazım olan bacarıq və texnikanın yalnız kiçik bir hissəsidir veb saytlar peşəkarlar. HTML və CSS ilə öyrənməyə və təcrübə etməyə davam etmək sizə bu alətləri mənimsəməyə və veb inkişafı sahəsində biliklərinizi genişləndirməyə imkan verəcək.
Ümid edirik ki, bu məqalə şəkilləri HTML-də necə mərkəzləşdirməyi başa düşməkdə faydalı oldu və bu mövzunu daha da araşdırmaq üçün sizə möhkəm zəmin verdi. Vizual elementlərin veb-sayta ahəngdar şəkildə necə inteqrasiya etdiyini görmək həmişə həyəcan vericidir və təsvirin mərkəzləşdirilməsi mütləq nail olmaq üçün dəyərli bir bacarıqdır. Gələcək HTML layihələrinizdə uğurlar və öyrənməyə davam edin!
Mən Sebastián Vidal, texnologiya və DIY işlərinə həvəsli kompüter mühəndisiyəm. Bundan əlavə, yaradıcısı mənəm tecnobits.com, burada texnologiyanı hər kəs üçün daha əlçatan və başa düşülən etmək üçün dərslikləri paylaşıram.