Puseur Gambar, téks, sarta elemen block nalika ngawangun situs web
Mun anjeun diajar kumaha carana ngawangun situs web , salah sahiji trik paling umum anjeun bakal kudu ngawasaan nyaeta kumaha carana museur Item dina jandela browser. Ieu bisa hartosna centering hiji gambar dina kaca, atawa bisa jadi téks dipastikeun puseur-kawas headline salaku bagian tina rarancang.
Cara ditangtoskeun keur ngalengkepan katingal visual ieu gambar dipuseurkeun atawa téks atanapi malah sakabéh Kalurahan anjeun ku ngagunakeun Cascading Style cadar (CSS) . Kalolobaan sipat keur centering geus di CSS saprak versi 1.0, sarta aranjeunna dianggo hébat sareng CSS3 tur modern panyungsi wéb .
Kawas loba aspék desain web, aya sababaraha cara ngagunakeun CSS jeung museur elemen dina hiji kaca web. Hayu urang nyandak katingal di sababaraha cara ngagunakeun CSS pikeun ngahontal katingal visual ieu.
Dina Ikhtisar Maké CSS jeung Center Unsur dina HTML
Centering kalawan CSS tiasa janten tantangan keur dimimitian web désainer lantaran aya kitu loba cara pikeun ngalengkepan hiji gaya visual ieu. Sedengkeun rupa métode bisa jadi nice atanapi seasoned web developer nu nyaho nu teu sadayana teknik dianggo dina unggal unsur, ieu tiasa sangar nangtang pikeun web professional anyar ti rupa-rupa métode hartina memang maranehna peryogi kauninga lamun ngagunakeun nu pendekatan. Hal pangalusna mun geus mangtaun hiji pamahaman sababaraha deukeut. Anjeun ngawitan nganggo aranjeunna, anjeun bakal diajar metoda nu gawéna pangalusna nu instansi.
Dina tingkat tinggi, anjeun tiasa nganggo CSS ka:
- téks Center
- Puseur unsur block-tingkat (kawas division a)
- Puseur hiji gambar
- Vertikal museur blok atawa hiji gambar
Loba (loba) sababaraha taun ka pengker, web désainer bisa nganggo
Centering téks kalawan CSS
Hal panggampangna pikeun museur kana Kalurahan hiji téks. Aya ngan hiji sipat gaya nu peryogi kauninga ngalakonan ieu: téks-align. Candak nu gaya CSS handap, contona:
p.center {téks-align: puseur; }
Kalawan garis ieu CSS, unggal ayat ditulis jeung kelas puseur bakal dipuseurkeun horisontal jero unsur indungna na. Contona, upami ayat ieu di jero division hiji, hartina eta éta anak tina division anu, éta bakal jadi dipuseurkeun horisontal jero
Di dieu téh conto kelas ieu dilarapkeun dina dokumen HTML:
téks ieu dipuseurkeun.
Nalika centering téks kalawan harta téks-align, inget yen eta bakal dipuseurkeun dina unsur na ngandung teu merta dipuseurkeun dina kaca pinuh téa. Ogé inget yen téks puseur-diyakinkeun bisa hésé maca pikeun blok badag tina kandungan, jadi make gaya kieu sparingly. Headline na blok leutik téks, kawas teaser téks pikeun hiji artikel atawa eusi nu sejenna, anu mindeng gampang maca jeung rupa lamun dipuseurkeun tapi blok badag tina téks, kawas artikel pinuh sorangan, bakal jadi nangtang ka meakeun lamun eusi ieu pinuh puseur diyakinkeun. Inget, readability sok konci lamun datang ka téks ramatloka!
Centering blok Kandungan kalawan CSS
Blok nu mana wae elemen dina kaca anjeun nu boga rubak diartikeun sarta ngadegkeun salaku unsur block-tingkat. Oftentimes, blok ieu dijieun ku ngagunakeun HTML
div.center {
margin: 0 otomatis;
lebar: 80em;
}
Ieu shorthand CSS keur milik margin bakal ngeset margins luhur jeung handap ka nilai 0, bari kénca jeung katuhu bakal ngagunakeun "otomatis". Ieu dasarna nyokot naon spasi nu geus sadia sarta meulah eta merata antara dua sisi jandéla viewport, éféktif centering unsur dina kaca.
Di dieu eta diterapkeun di HTML nu:
tapi teks jero eta ditinggalkeun Blok.
Salami blok anjeun boga rubak diartikeun, éta baris museur téa jero unsur nu ngandung. Téks dikandung dina blok nu moal dipuseurkeun dina eta, tapi bakal ninggalkeun-diyakinkeun. Ieu becaus téks anu ditinggalkeun-diyakinkeun dina standar di web panyungsi. Lamun hayang téks dipuseurkeun ogé, anjeun bisa migunakeun harta téks-align kami ditutupan samemehna ditéang jeung metoda ieu museur division nu.
Centering Gambar jeung CSS
Bari paling panyungsi bakal nembongkeun gambar dipuseurkeun maké sipat téks-align sami urang geus melong pikeun paragraf, éta moal mangrupakeun ide nu sae pikeun ngandelkeun téknik anu sakumaha éta henteu dianjurkeun ku W3C nu . Kusabab eta teu dianjurkeun, aya salawasna kasempetan nu versi kahareup panyungsi bisa milih malire metoda ieu.
Gantina make téks-align ka museur hiji gambar, Anjeun kudu eksplisit ngabejaan browser nu gambar mangrupa unsur block-tingkat. Ku cara ieu, anjeun bisa museur deui sakumaha Anjeun ngalakukeunana sagala blok séjén. Di handap ieu CSS sangkan ieu lumangsung:
img.center {
tampilan: block;
margin-kénca: otomatis;
margin-katuhu: otomatis;
}
Na didieu teh HTML nu keur gambar anu urang hoyong jadi dipuseurkeun:
Anjeun oge bisa museur objék maké di-jalur CSS (tempo di handap), tapi pendekatan ieu teu dianjurkeun saprak eta nambihan gaya visual kana aksara HTML Anjeun. Inget, urang rék misahkeun gaya jeung struktur, jadi nambahkeun gaya CSS kana kode HTML anjeun kalawan putus yen separation na, kawas kitu, kudu dihindari sabisana.
Centering Unsur vertikal jeung CSS
Centering objék vertikal geus salawasna geus nangtang dina rarancang web, tapi jeung sékrési ti CSS fléksibel Box Layout Module di CSS3, aya ayeuna cara pikeun ngalakukeun eta.
alignment nangtung jalan kitu mun alignment horizontal katutupan luhur. Harta CSS nyaeta vertikal-align jeung nilai tengah.
.vcenter {
nangtung-align: tengah;
}
The downside mun pendekatan ieu anu teu sakabeh panyungsi ngarojong CSS FlexBox, najan beuki loba nu datang sabudeureun pikeun metoda ieu perenah CSS anyar! Kanyataanna, kabeh panyungsi modéren kiwari kiwari ngarojong gaya CSS ieu. Ieu ngandung harti yén anjeun ukur masalah kalayan Flexbox bakal jadi versi browser jauh leuwih kolot.
Upami Anjeun gaduh isu nu ngabogaan panjalajah heubeul, W3C nu ngajak nu puseur téks vertikal dina hiji wadah maké metodeu di handap ieu:
- Tempat anu elemen bisa dipuseurkeun jero unsur nu ngandung, kayaning div a.
- Atur jangkungna minimum dina unsur nu ngandung.
- Dibewarakeun yén unsur nu ngandung salaku sél méja.
- Nyetél alignment nangtung pikeun "tengah".
Contona, di dieu téh CSS di:
.vcenter {
mnt-jangkungna: 12em;
tampilan:-sél méja;
nangtung-align: tengah;
}
Sarta di dieu nyaeta HTML nu:
téks ieu vertikal dipuseurkeun di kotak.
Nangtung centering na versi heubeul tina Internet Explorer
Aya sababaraha cara maksa Internet Explorer (IE) pikeun museur lajeng maké komentar kondisional sahingga ngan IE nilik kana gaya, tapi aranjeunna bit verbose na awon. Warta alus nyaeta anu mibanda kaputusan panganyarna Microsoft pikeun neundeun rojongan pikeun versi heubeul tina IE, maranéhanana panyungsi unsupporting kedah on jalan kaluar pas, sahingga leuwih gampang pikeun web désainer ngagunakeun perenah modern ngadeukeutan kawas CSS FlexBox nu bakal nyieun sagala perenah CSS, teu ngan centering, leuwih gampang pikeun sakabéh web désainer.