Gambar tengah, teks, lan elemen blok nalika mbangun situs web
Yen sampeyan sinau babagan carane nggawe situs web , salah sijine trik sing paling umum sampeyan kudu nguwaosi carane nggawe item ing jendela browser. Iki bisa tegese pusatisasi gambar ing kaca kasebut, utawa bisa dadi teks tengah-mbenerake kaya headline minangka bagéan saka rancangan.
Cara sing bener kanggo nggoleki tampilan visual saka gambar utawa teks sing dipusatake utawa malah kabeh kaca web sampeyan yaiku nggunakake Cascading Style Sheets (CSS) . Paling sifat kanggo centering wis ana ing CSS wiwit versi 1.0, lan bisa dianggo kanthi CSS3 lan browser web modern.
Kaya akeh aspek desain web, ana pirang-pirang cara kanggo nggunakake CSS minangka elemen pusat ing kaca web. Ayo goleki sawetara cara kanggo nggunakake CSS kanggo entuk tampilan visual iki.
Ringkesan Nggunakake CSS kanggo Pusat Unsur ing HTML
Centering with CSS bisa dadi tantangan kanggo perancang web awal amarga ana akeh cara kanggo ngrampungake gaya visual iki. Nalika macem-macem cara bisa dadi pengembang web sing becik utawa wigati sing ngerti yen ora kabeh teknik gawe kabeh elemen, iki bisa nantang banget kanggo profesional web sing anyar amarga macem-macem cara liya tegese kudu ngerti kapan nggunakake pendekatan. Bab sing paling apik kanggo nindakake yaiku ngerteni sawetara cara. Nalika sampeyan miwiti nggunakake, sampeyan bakal mangerteni cara sing paling apik kanggo dilakoni.
Ing tingkat dhuwur, sampeyan bisa nggunakake CSS kanggo:
- Teks tengah
- Pusat elemen tingkat blok (kaya divisi)
- Pusat gambar
- Sacara tegas pusat blok utawa gambar
Akeh (pirang-pirang) taun kepungkur, perancang web bisa nggunakake elemen
Teks Pusat karo CSS
Bab sing paling gampang kanggo pusat ing kaca web yaiku teks. Ana mung siji gaya properti sing sampeyan kudu ngerti kanggo nindakake iki: teks-align. Njupuk gaya CSS ing ngisor iki, contone:
p.center {text-align: center; }
Kanthi garis CSS iki, saben paragraf sing ditulis karo kelas tengah bakal dipusatake ing njero unsur induk. Contone, yen paragraf kasebut ana ing bagean divisi, tegese dadi anak saka divisi kasebut, bakal diarani horisontal ing
Kene conto saka kelas iki sing diterapake ing dokumen HTML:
Tèks iki pusat.
Nalika nggatekake teks kanthi teks-align property, elinga yen bakal dipusatake ing sawijining unsur sing ana lan ora kudu dipusatake ing kaca kanthi dhewe. Uga elinga yen teks sing wis diyakini tengah bisa angel dibaca kanggo isi gedhe, supaya nggunakake gaya iki kanthi cetha. Headline lan pamblokiran cilik, kaya teks teaser kanggo artikel utawa isi liyane, asring gampang diwaca lan nggoleki nalika dipusatake, nanging luwih akeh tinimbang teks, kayata artikel lengkap dhewe, bakal nantang yen nganggo isi lengkap diyakini. Elingi, kemampuan maca tansah kunci nalika nerangake teks situs web!
Blok Tengahing Konten karo CSS
Blok yaiku unsur ing kaca sing nduweni jembar sing ditemtokake lan didegake minangka elemen tingkat blok. Kadhangkala, pamblokiran iki digawé kanthi nggunakake HTML
div.center {
margin: 0 otomatis;
jembar: 80em;
}
Iki cendhek CSS kanggo properti jembar bakal nyetel wates ndhuwur lan ngisor menyang nilai 0, dene sisih kiwa lan tengen bakal nggunakake "otomatis". Iki ateges njupuk sembarang spasi sing kasedhiya lan dibagi dadi merata antarane loro-lorone jendela viewport, kanthi efektif pusatisasi unsur ing kaca.
Punika dipunginakaken ing HTML:
nanging teks ing jejere didhelikake.
Sanalika pemblokiran sampeyan nduweni jembar sing ditetepake, iku bakal ana ing jero unsur sing ana. Tèks sing ana ing blok kasebut ora bakal dipusatake, nanging bakal dibenerake. Iki amarga teks ditinggalake ing standar ing browser web. Yen sampeyan pengin teks pusat uga, sampeyan bisa nggunakake Properti teks-kempel kita dijamin sadurungé karo metode iki kanggo tengah divisi.
Centering Images with CSS
Nalika akeh browser bakal nampilake gambar sing dipusatake nggunakake properti teks-align sing padha sing wis katon kanggo paragraf, iku ora apik kanggo gumantung ing technique sing ora dianjurake dening W3C . Wiwit ora disaranake, tansah ana kemungkinan sing versi mangsa browser bisa milih kanggo ngilangi cara iki.
Tinimbang nggunakake teks-kempal kanggo nampilake gambar, sampeyan kudu menehi tegese marang browser sing gambar minangka unsur tingkat blok. Kanthi cara iki, sampeyan bisa ngrewangi minangka blok liyane. Ing ngisor iki ana CSS kanggo nggawe iki:
img.center {
tampilan: blok;
margin-left: auto;
margin-right: otomatis;
}
Lan ing kene ana HTML sing kanggo gambar sing kita kepingin dadi:
Sampeyan uga bisa nggawe obyek kanthi nggunakake CSS in-line (ndeleng ngisor), nanging pendekatan iki ora dianjurake amarga nambah gaya visual menyang markup HTML. Elingi, kita pengin misahake gaya lan struktur, supaya nambah gaya CSS menyang kode HTML kanthi ngeculake pemisahan kasebut lan, supaya, sampeyan kudu nyingkiri kapan wae.
Unsur Pusat nang vertikal karo CSS
Obyek pusat nang vertikal tansah nantang ing desain web, nanging kanthi release CSS Flexible Box Layout Module ing CSS3, saiki ana cara kanggo nindakake.
Alignment vertikal berfungsi sama kaliyan keselarasan horizontal tertutup di atas. Properti CSS jembar vertikal kanthi nilai tengah.
.vcenter {
vertikal-align: tengah;
}
Kekurangan pendekatan iki yaiku ora kabeh browser ndhukung CSS FlexBox, senadyan liyane lan liyane bakal ngubengi cara tata letak CSS sing anyar! Ing kasunyatan, kabeh browser modern saiki ndhukung gaya CSS iki. Iki tegese sampeyan mung keprihatinan karo Flexbox bakal dadi versi browser lawas sing luwih lawas.
Yen sampeyan duwe masalah karo browser lawas, W3C nyaranake sampeyan pusatake vertikal ing wadhah kanthi nggunakake metode kasebut:
- Selehake unsur kasebut dadi fokus ing sajrone elemen sing ana, kayata div.
- Setel dhuwur minimal ing unsur sing ana.
- Ngomongake unsur kasebut minangka sel tabel.
- Setel alignment vertikal menyang "tengah."
Contone, ing kene ana CSS:
.vcenter {
min-height: 12em;
tampilan: table-cell;
vertikal-align: tengah;
}
Lan ing kene ana HTML:
Tèks iki kanthi pérangan vertikal ing kothak.
Vertical Centering lan Versi Lama Internet Explorer
Ana sawetara cara kanggo meksa Internet Explorer (IE) kanggo pusat lan banjur nggunakake komentar sing kondisional supaya mung IE katon gaya, nanging padha sing rada tipis lan elek. Kabar apik yaiku karo kaputusan Microsoft anyar kanggo nyuda support kanggo versi IE sing luwih lawas, sing ora bisa didhukung browser kasebut ing wayah wayahe, supaya luwih gampang perancang web nggunakake pendekatan tata letak modern kaya CSS FlexBox sing bakal nggawe kabeh layout CSS, ora mung pusat, luwih gampang kanggo kabeh perancang web.