Centri bildojn, tekston kaj blokajn elementojn kiam konstruado de retejoj
Se vi lernas kiel konstrui retejojn , unu el la plej oftaj lertaĵoj, kiujn vi bezonos por mastri, estas kiel centri erojn en la retumilo. Ĉi tio povus signifi centri bildon sur la paĝo, aŭ ĝi povus esti centro-pravigi tekston kiel titolojn kiel parto de la dezajno.
La taŭga maniero por plenumi ĉi tiun vidan aspekton de centritaj bildoj aŭ tekston aŭ eĉ via tuta retpaĝaro estas per uzado de Cascading Style Sheets (CSS) . Plejparto de la propraĵoj por centrado estis en CSS ekde versio 1.0, kaj ili funkcias bonegan kun CSS3 kaj modernaj retumiloj .
Kiel multaj aspektoj de dezajno retejo, ekzistas multaj manieroj uzi CSS por centri elementojn en retpaĝaro. Ni rigardu iujn malsamajn manierojn uzi CSS por atingi ĉi tiun vidan aspekton.
Sur Superrigardo de Uzado de CSS al Centraj Elementoj en HTML
Centri kun CSS povas esti defio por komencaj retpaĝistoj, ĉar ekzistas tiom da malsamaj manieroj por plenumi ĉi tiun vidan stilon. Dum la vario de metodoj povas esti agrablaj aŭ agorditaj retejaj programistoj, kiuj scias, ke ne ĉiuj teknikoj funkcias en ĉiu elemento, tio povas esti terura defio por pli novaj retejaj profesiuloj, ĉar la ampleksa vario de metodoj signifas, ke ili bezonas scii, kiam uzi la aliron. Lin plej bona por fari kompreni kelkajn alirojn. Kiel vi komencas uzi ilin, vi lernos, kiun metodo metas plej bone en tiuj okazoj.
Al alta nivelo, vi povas uzi CSS al:
- Centra teksto
- Centri blok-nivelan elementon (kiel divido)
- Centru bildon
- Vertikale centru blokon aŭ bildon
Multaj (multaj) jarojn, diseñadores retejo povus uzi la elementon por centri bildojn kaj tekston, sed tiu HTML-elemento nun estas senkulpigita kaj ne plu subtenata en modernaj retumiloj. Ĉi tio signifas, ke vi devas eviti uzi ĉi tiun HTML-elementon, se vi volas, ke viaj paĝoj montriĝu konvene kaj laŭformi al modernaj normoj! La kialo ĉi tiu elemento estis senkulpigita estas, plejparte, ĉar modernaj retejoj devus havi klaran apartigon de strukturo kaj stilo. HTML estas uzata por krei strukturon dum CSS diktas stilon. Ĉar centrado estas vida karakterizaĵo de elemento (kiel ĝi aspektas pli ol kio ĝi estas), tiu stilo estas manipulita kun CSS, ne HTML. Jen kial aldoni etikedon al la strukturo de HTML estas malĝusta laŭ modernaj normoj. Anstataŭe, ni turnos nin al CSS por akiri niajn elementojn belajn kaj centritajn.
Centri Tekston kun CSS
La plej facila afero centri sur retpaĝaro estas teksto. Ekzistas nur unu stelo-proprieto, kiun vi bezonas scii fari: teksto-aline. Prenu la CSS-stilon sube, ekzemple:
p.center {tekst-aligno: centro; }
Kun ĉi tiu linio de CSS, ĉiu alineo skribita kun la centra klaso estus centrita horizontale ene de ĝia gepatra elemento. Ekzemple, se la alineo estis ene de divido, signifante ke ĝi estis infano de tiu divido, ĝi estus centrita horizontale ene de la
Jen ekzemplo de ĉi tiu klaso aplikita en la HTML-dokumento:
Ĉi tiu teksto estas centrita.
Centrinte tekston kun la tekst-alinea propraĵo, memoru, ke ĝi estos centrita ene de ĝia enhavanta elemento kaj ne nepre centrita ene de la plena paĝo mem. Ankaŭ memoru, ke tiu-pravigita teksto povas malfacile legi por grandaj blokoj de enhavo, do uzu ĉi tiun stilon ŝpare. Fajliloj kaj malgrandaj blokoj de teksto, kiel teaser-teksto por artikolo aŭ alia enhavo, ofte estas facile facile legataj kaj fajnaj kiam centris, sed pli grandaj blokoj de teksto, kiel la plena artikolo mem, estus malfacilaj por konsumi se la enhavo estis tute centra pravigita. Memoru, legebleco ĉiam estas ŝlosilo, kiam ĝi venas al la teksta retejo!
Centri Blokojn de Enhavo kun CSS
Blokoj estas iuj elementoj en via paĝo, kiuj havas difinitan larĝecon kaj estas establitaj kiel bloko-nivelo. Ofte, ĉi tiuj blokoj estas kreitaj per la uzado de la elemento
div.center {
rando: 0 aŭtomata;
larĝa: 80em;
}
Ĉi tiu CSS-taŭgeco por la rando proprieto starigis la suprajn kaj malsuprajn randojn al valoro de 0, dum la maldekstra kaj dekstra uzus "aŭtomobilon". Ĉi tio esence prenas iun spacon, kiu estas disponebla kaj dividas ĝin egale inter la du flankoj de la fenestraĵa fenestro, efektive centranta la elementon sur la paĝo.
Ĉi tie ĝi aplikiĝas en la HTML:
sed la teksto ene de ĝi estas lasita vicigita.
Dum via bloko havas difinitan larĝecon, ĝi centros sin ene de la enhavanta elemento. Teksto en tiu bloko ne estos centrita en ĝi, sed restos-pravigita. Ĉi tiu beka teksto estas maldekstra-pravigita en la defaŭlta en retumiloj. Se vi volus la tekston centriĝi ankaŭ, vi povus uzi la tekst-alignan posedaĵon, kiun ni antaŭe kovris kune kun ĉi tiu metodo por centri la dividon.
Centri Bildojn kun CSS
Dum la plimulto de la foliumiloj montros bildojn centritajn per la sama teksto-aligna propraĵo, kiun ni jam rigardis por la alineo, ĝi ne estas bona ideo fidi tiun teknikon, ĉar ĝi ne rekomendas la W3C . Ĉar ĝi ne estas rekomendinda, ĉiam estas ebleco, ke estontaj versioj de retumiloj povus elekti ignori ĉi tiun metodon.
Anstataŭ uzi tekston-aliĝi por centri bildon, vi devas eksplicice diri al la retumilo ke la bildo estas bloko-nivelo. De ĉi tiu maniero, vi povas centri ĝin kiel vi volas iun alian blokon. Jen la CSS por fari ĉi tion okazi:
img.center {
montriĝo: bloko;
rando-maldekstra: aŭtomobilo;
rando-dekstra: aŭtomata;
}
Kaj jen la HTML por la bildo, kiun ni ŝatus esti centrita:
Vi povas ankaŭ centri objektojn uzante enretan CSS (vidu sube), sed ĉi tiu aliro NE rekomendas, ĉar ĝi aldonas vidajn stilojn en vian HTML-markon. Memoru, ni deziras apartigi stilon kaj strukturon, do aldonante CSS-stilojn al via HTML-kodo kun rompi tiun apartigon kaj, kiel tia, ĝi devus esti evitita kiam ajn eblas.
Centri Elementojn Vertikale kun CSS
Centri objektojn vertikale ĉiam defiis en retejo, sed kun la liberigo de la CSS Fleksebla Skatolo-Modo en CSS3, nun estas maniero fari ĝin.
Vertikala alineo funkcias simile al horizontala alineo kovrita supre. La CSS-posedaĵo estas vertikala alineo kun la meza valoro.
.vcenter {
vertikala alineo: meza;
}
La malfacilaĵo al ĉi tiu aliro estas, ke ne ĉiuj foliumiloj subtenas CSS FlexBox, kvankam pli kaj pli proksimiĝas al ĉi tiu nova CSS-aranĝo. Fakte, ĉiuj modernaj retumiloj hodiaŭ nun subtenas ĉi tiun CSS-stilon. Ĉi tio signifas, ke viaj solaj zorgoj pri Flexbox estus multe pli malnovaj retumila versio.
Se vi havas problemojn kun malnovaj foliumiloj, la W3C rekomendas, ke vi centras tekston vertikale en ujo per la sekva metodo:
- Metu la elementojn por esti centritaj ene de enhavanta elemento, kiel ekzemple div.
- Fiksu minimuman altecon sur la enhavanta elemento.
- Deklari ke enhavanta elementon kiel tablo-ĉelo.
- Fiksu la vertikala alineación al "meza".
Ekzemple, jen la CSS:
.vcenter {
min-alteco: 12em;
montriĝo: tablo-ĉelo;
vertikala alineo: meza;
}
Kaj jen la HTML:
Ĉi tiu teksto estas vertikale centrita en la skatolo.
Vertikala Centro kaj Pli malnovaj Versioj de Interreta Esploristo
Ekzistas kelkaj manieroj forigi Interreton (IE) al centro kaj poste uzi kondiĉojn por ke nur IE vidas la stilojn, sed ili estas iom verŝajne kaj malbelaj. La bona sciigo estas, ke kun la lastatempa decido de Microsoft faligi subtenon por pli malnovaj versioj de IE, tiuj senhelpa retumiloj baldaŭ forpuŝus, por ke ĝi ebligas al la diseñadores retejo uzi modernajn aranĝojn kiel CSS FlexBox, kiu faros ĉiujn CSS-aranĝon, Ne nur centranta, Pli facila por ĉiuj teraj diseñadores.