Stampi taċ-ċentru, test, u elementi ta 'blokk meta jinħolqu websajts
Jekk qed titgħallem kif tibni websajts , wieħed mill-aktar tricks komuni li jkollok bżonn biex nikkordja huwa kif ċċentra oġġetti fit-tieqa tal-browser. Dan jista 'jfisser iċ-ċentralizzazzjoni ta' immaġni fuq il-paġna, jew jista 'jkun test ġustifikattiv taċ-ċentru bħal aħbarijiet bħala parti mid-disinn.
Il-mod xieraq biex tintlaħaq din il-ħarsa viżiva ta 'immaġni ċċentrata jew test jew anki l-paġna web sħiħa tiegħek hi billi tuża Fuljetti ta' Kuluri Cascading (CSS) . Il-biċċa l-kbira tal-proprjetajiet għal ċentrazzjoni ilhom fis-CSS mill-verżjoni 1.0, u jaħdmu tajjeb ma ' CSS3 u web browsers moderni.
Bħal bosta aspetti tad-disinn tal-web, hemm modi multipli għall-użu ta 'CSS għal elementi ċentrali f'paġna web. Ejja nħarsu lejn xi modi differenti ta 'kif tuża CSS biex tikseb dan il-ħarsa viżiva.
Fuq Ħarsa Ġenerali lejn l-Użu ta 'CSS għall-Elementi taċ-Ċentru f'HTML
Iċċentrar mas-CSS jista 'jkun sfida għall-bidu ta' disinjaturi tal-web minħabba li hemm ħafna modi differenti biex dan l-istil viżiv isir. Filwaqt li l-varjetà ta 'metodi jistgħu jkunu żviluppaturi tal-web sbieħ jew imħawwar li jafu li mhux it-tekniki kollha jaħdmu fuq kull element, dan jista' jkun ta 'sfida kbira għal professjonisti tal-web ġodda peress li l-varjetà wiesgħa ta' metodi tfisser li għandhom ikunu jafu meta jużaw liema approċċ. L-aħjar ħaġa li għandek tagħmel hi li tikseb għarfien ta 'ftit approċċi. Hekk kif tibda tużahom, inti se titgħallem liema metodu jaħdem l-aħjar f'liema każijiet.
Fuq livell għoli, tista 'tuża CSS għal:
- Test taċ-Ċentru
- Ċentru ta 'element ta' blokka (bħal diviżjoni)
- Iċċentra immaġni
- Iċċentra b'mod vertikali blokka jew immaġni
Ħafna (ħafna) snin ilu, id-disinjaturi tal-web jistgħu jużaw l-element
Test ta 'Centering ma' CSS
L-eħfef ħaġa li trid tiċċentra fuq paġna elettronika hija t-test. Hemm biss stil ta 'proprjetà waħda li għandek bżonn tkun taf biex tagħmel dan: text-align. Ħu l-istil CSS hawn taħt, per eżempju:
p.center {text-align: center; }
B'din il-linja ta 'CSS, kull paragrafu bil-miktub mal-klassi taċ-ċentru jkun iċċentrat orizzontalment ġewwa l-element prinċipali tiegħu. Per eżempju, jekk il-paragrafu kien ġewwa diviżjoni, li jfisser li kien tifel ta 'dik id-diviżjoni, ikun iċċentrat orizzontalment ġewwa
Hawn hu eżempju ta 'din il-klassi applikata fid-dokument HTML:
Dan it-test huwa ċċentrat.
Meta tiffoka t-test mal-proprjetà ta 'l-allinjament tat-test, ftakar li se tkun ċċentrata fi ħdan l-element li jkun fih u mhux neċessarjament ċċentrata fil-paġna sħiħa nnifisha. Ftakar ukoll li t-test iġġustifikat minn ċentru jista 'jkun diffiċli biex jinqara għal blokki kbar ta' kontenut, għalhekk tuża dan l-istil bi ftit. Punti ewlenin u blokki żgħar ta 'test, bħal test teaser għal oġġett jew kontenut ieħor, spiss huma faċli biex jinqraw u multa meta ċċentrati, iżda blokki akbar ta' test, bħall-artiklu sħiħ innifsu, ikun ta 'sfida li jikkunsmaw jekk il-kontenut kien kompletament ċentru ġustifikat. Ftakar, il- leġġibbiltà hija dejjem importanti meta niġu għat-test tal-websajt!
Blokki ta 'Kontenut ta' Centering ma 'CSS
Il-blokki huma kwalunkwe element fuq il-paġna tiegħek li għandhom wisa 'definita u huma stabbiliti bħala element ta' blokka. Ħafna drabi, dawn il-blokki huma maħluqa bl-użu tal-element HTML
div.center {
marġini: 0 auto;
wisa ': 80m;
}
Din is-sekwenza tas-CSS għall-proprjetà tal-marġni tistabbilixxi l-marġini ta 'fuq u ta' isfel għal valur ta '0, filwaqt li x-xellug u l-lemin jużaw "auto". Dan essenzjalment jieħu kwalunkwe spazju li huwa disponibbli u jaqsam b'mod indaqs bejn iż-żewġ naħat tat-tieqa tal-portal, li effettivament jiffoka l-element fuq il-paġna.
Hawnhekk huwa applikat fl-HTML:
imma t-test ġewwa fih jitħalla allinjat.
Sakemm il-blokka tiegħek ikollha wisa 'definita, hi ser tiċċentra ruħha ġewwa l-element li jkun fih. It-test li jinsab f'dak il-blokk mhux se jkun iċċentrat fih, iżda se jibqa 'ġustifikat. Dan huwa għaliex it-test jibqa 'ġġustifikat fin-nuqqas fil-web browsers. Jekk riedu t-test iċċentrat ukoll, tista 'tuża l-proprjetà ta' allinjament tat-test li kont kopert qabel flimkien ma 'dan il-metodu biex niffukaw id-diviżjoni.
Iċċentra ta 'Images b'CSS
Filwaqt li l-biċċa l-kbira tal-browsers se juru stampi ċċentrati bl-użu tal-istess allinjament ta 'test li diġà eżaminajna għall-paragrafu, mhuwiex idea tajba li tibbaża ruħha fuq dik it-teknika peress li mhux rakkomandat mill -W3C . Peress li mhux irrakkomandat, dejjem hemm ċans li l-verżjonijiet futuri tal-browsers jistgħu jagħżlu li jinjoraw dan il-metodu.
Minflok ma tuża l-allinjament tat-test biex iċċentra immaġni, għandek tgħid espliċitament lill-browser li l-immaġni hija element ta 'blokka. B'dan il-mod, tista 'tiċċentraha kif tkun xi blokka oħra. Hawn is-CSS biex dan iseħħ:
img.center {
wiri: blokka;
marġni-xellug: auto;
dritt tal-marġni: auto;
}
U hawn huwa l-HTML li għall-immaġni li nixtiequ nkunu ċċentrati:
Tista 'wkoll ċentru oġġetti li jużaw CSS in-line (ara hawn taħt), iżda dan l-approċċ MHUX rakkomandat peress li żżid stili viżwali fis-markup HTML tiegħek. Ftakar, irridu nissejnu l-istil u l-istruttura, u b'hekk inżidu l-istili CSS mal-kodiċi HTML tiegħek b'interruzzjoni ta 'dik is-separazzjoni u, bħala tali, għandu jiġi evitat kull meta jkun possibbli.
Elementi ta 'ċentralizzazzjoni Vertikalment ma' CSS
L-oġġetti li jiċċentraw b'mod vertikali minn dejjem kienu ta 'sfida fid-disinn tal-web, iżda bir-rilaxx tal-Modulu ta' Disinn tal-Kaxxa Flexible CSS f'CSS3, issa hemm mod biex tagħmel dan.
L-allinjament vertikali jaħdem b'mod simili għall-allinjament orizzontali kopert hawn fuq Il-proprjetà CSS hija vertikali-allinja mal-valur tan-nofs.
.vcenter {
allinjament vertikali: nofs;
}
L-iżvantaġġ għal dan l-approċċ huwa li mhux il-browsers kollha jappoġġaw CSS FlexBox, għalkemm aktar u aktar qegħdin jiġu madwar dan il-metodu ġdid ta 'tqassim tas-CSS! Fil-fatt, il-browsers moderni llum illum jappoġġjaw dan l-istil CSS. Dan ifisser li t-tħassib tiegħek biss ma 'Flexbox ikun verżjoni tal-browser aktar antika.
Jekk għandek problemi bil-browsers anzjani, il-W3C jirrakkomanda li ċċempel it-test b'mod vertikali f'kontenitur billi tuża l-metodu li ġej:
- Poġġi l-elementi biex ikunu ċċentrati ġewwa element li fih, bħal div.
- Issettja għoli minimu fuq l-element li jkun fih.
- Tiddikjara li fih element bħala ċellula tal-mejda.
- Issettja l-allinjament vertikali għal "nofs".
Pereżempju, hawnhekk hija s-CSS:
.vcenter {
min-għoli: 12em;
wiri: ċellula tal-mejda;
allinjament vertikali: nofs;
}
U hawn huwa l-HTML:
Dan it-test huwa ċċentrat vertikalment fil-kaxxa.
Vertikali Centering u Verżjonijiet Qodma ta 'l-Internet Explorer
Hemm xi modi biex tissaħħaħ l-Internet Explorer (IE) u mbagħad tuża kummenti kondizzjonali sabiex IE biss jara l-istili, iżda huma daqsxejn verbali u ikrah. L-aħbar it-tajba hija li bid-deċiżjoni reċenti ta 'Microsoft li tinżel l-appoġġ għal verżjonijiet qodma ta' IE, dawk il-browsers li ma jsostnux għandhom ikunu fi tmiemhom, u b'hekk tagħmilha aktar faċli għal disinjaturi tal-web biex jużaw metodi ta 'tqassim modern bħal CSS FlexBox li se jagħmel it-tqassim kollu tas-CSS, Mhux biss centering, aktar faċli għall-web disinjaturi kollha.