Pri izdelavi spletnih mest si oglejte slike, besedilo in elemente blokov
Če se učite, kako graditi spletne strani , je eden od najpogostejših trikov, ki ga boste morali obvladati, kako srediti elemente v oknu brskalnika. To bi lahko pomenilo osredotočenje slike na stran ali pa bi bilo lahko v besedilu zasnovano besedilo, ki bi utemeljevalo sredino.
Pravilen način za dosego tega vizualnega videza osredotočenih slik ali besedila ali celo celotne spletne strani je uporaba Cascading Style Sheets (CSS) . Večina lastnosti za centriranje je v CSS od različice 1.0, in odlično delujejo s CSS3 in sodobnimi spletnimi brskalniki .
Kot mnogi vidiki spletnega oblikovanja obstaja več načinov za uporabo CSS-a za določanje elementov na spletni strani. Oglejmo si nekaj različnih načinov uporabe CSS-a za doseganje tega vizualnega videza.
Pri pregledu uporabe CSS v elemente centra v HTML-ju
Centriranje s CSS je lahko izziv za začetek spletnega oblikovalca, saj obstaja toliko različnih načinov za doseganje tega vizualnega sloga. Medtem ko so različne metode lahko lepo ali začinjeni spletni razvijalci, ki vedo, da vse tehnike ne delujejo na vsakem elementu, je to lahko strašno izziv za novejše strokovnjake na spletu, saj širok razpon metod pomeni, da morajo vedeti, kdaj uporabiti kateri pristop. Najboljša stvar je pridobiti razumevanje nekaj pristopov. Ko jih začnete uporabljati, boste izvedeli, kateri način dela najbolje deluje v primerih.
Na visoki ravni lahko CSS uporabite za:
- Središče besedila
- Centrirajte element na ravni blokov (kot delitev)
- Postavite sliko
- Vertikalno postavite blok ali sliko
Pred mnogimi (mnogimi) leti so lahko spletni oblikovalci uporabili element
Centriranje besedila s CSS
Najlažje je osredotočiti na spletno stran besedila. Za to morate storiti le eno znamko sloga: poravnajte besedilo. Spodaj slišite CSS slog, na primer:
p.center {besedilo-poravnava: center; }
S to vrstico CSS bo vsak odstavek, zapisan s srednjim razredom, vodoravno usmerjen v svoj starševski element. Na primer, če je bil odstavek znotraj oddelka, kar pomeni, da je bil otrok te delitve, bi bil v sredini
Tukaj je primer tega razreda, uporabljenega v HTML dokumentu:
To besedilo je osredotočeno.
Pri centriranju besedila z lastnostmi za poravnavo besedila ne pozabite, da bo središče v njegovem vsebujočem elementu in ne bo nujno osredotočeno na celotno celotno stran. Upoštevajte tudi, da je težko brati vsebine za besedilno sredstvo, ki je upravičeno do sredine, zato ga prihranite pri uporabi. Naslovi in majhne črke besedila, kot je besedilo za besedilo ali drugo vsebino, se pogosto zlahka berejo in dajo v središču, vendar bi bili večji bloki besedila, kot je celoten članek, izziv za porabo, če bi bila vsebina v celoti upravičeno. Ne pozabite, berljivost je vedno ključna, ko gre za besedilo spletnega mesta!
Centriranje blokov vsebine s CSS
Bloki so vsi elementi na vaši strani, ki imajo določeno širino in so določeni kot element na ravni blokov. Pogosto so ti bloki ustvarjeni z uporabo elementa HTML
div.center {
margin: 0 auto;
širina: 80em;
}
Ta stavek CSS za robno lastnost bi postavil zgornji in spodnji rob do vrednosti 0, medtem ko bi levo in desno uporabilo »samodejno«. To v bistvu potrebuje ves prostor, ki je na voljo in ga enakomerno razdeli med obe strani okna pogleda, s čimer učinkovito centrira element na strani.
Tukaj se uporablja v HTML-ju:
vendar je besedilo v njej levo poravnano.
Dokler ima vaš blok določeno širino, se bo sam center postavil znotraj vsebujočega elementa. Besedilo, vsebovano v tem bloku, ne bo v njej osredotočeno, temveč bo ostalo upravičeno. To je zato, ker je besedilo v privzetih nastavitvah v spletnih brskalnikih upravičeno. Če želite, da je besedilo tudi središče, lahko uporabite objekt za poravnavo besedila, ki smo ga prej v povezavi s to metodo, da bi center delili.
Centriranje slik s CSS
Medtem ko večina brskalnikov prikaže slike, osredotočene z istim tekstom, ki smo jo že preučili, ni dobra ideja, da bi se zanašali na to tehniko, saj W3C ne priporoča. Ker ni priporočljivo, vedno obstaja možnost, da bi se lahko bodoče različice brskalnikov izognile tej metodi.
Namesto da bi uporabili poravnavo besedila za centriranje slike, bi morali izrecno povedati brskalniku, da je slika blokovni element. Na ta način ga lahko osredotočite tako, kot bi ga kateri koli drugi blok. Tukaj je CSS, da se to zgodi:
img.center {
prikaz: blok;
margin-left: auto;
margin-right: auto;
}
In tukaj je HTML, ki je za sliko, ki bi jo radi centerirali:
Središča lahko uporabite tudi z uporabo CSS v spletu (glejte spodaj), vendar ta pristop ni priporočljiv, saj v svoje oznake HTML dodaja vizualne sloge. Ne pozabite, da želimo ločiti slog in strukturo, tako da dodamo CSS sloge v vašo HTML kodo s prekinitvijo te ločitve in kot takega se je treba izogibati, kadar koli je to mogoče.
Centriranje elementov vertikalno s CSS
Centrirni objekti so bili vertikalno vedno izzivalni v spletnem oblikovanju, toda s sprostitvijo modula CSS Flexible Box Layout v CSS3 je zdaj na voljo način za to.
Navpična poravnava deluje podobno horizontalni poravnavi, ki je zajeta zgoraj. Lastnost CSS je navpično poravnana z srednjo vrednostjo.
.center {
navpično poravnava: sredina;
}
Slaba stran tega pristopa je, da vsi brskalniki ne podpirajo CSS FlexBox, čeprav se vedno bolj približujejo novi metodi postavitve CSS-a! Dejansko vsi moderni brskalniki danes podpirajo ta stil CSS. To pomeni, da bi bila vaša edina skrb za Flexbox veliko starejša različica brskalnika.
Če imate težave z starejšimi brskalniki, W3C priporoča, da se besedilo navpično usmeri v vsebnik z naslednjo metodo:
- Postavite elemente, ki jih je treba centrirati znotraj vsebujočega elementa, kot je div.
- Nastavite najmanjšo višino na vsebujočem elementu.
- Razglasi, da vsebuje element kot celico tabele.
- Nastavite navpično poravnavo na "sredino".
Na primer, tukaj je CSS:
.center {
min-visina: 12em;
prikaz: celica celice;
navpično poravnava: sredina;
}
In tukaj je HTML:
To besedilo je vertikalno centrirano v polju.
Vertikalno centriranje in starejše različice Internet Explorerja
Obstaja nekaj načinov, kako prisiliti Internet Explorer (IE), da se osredotoči in nato uporabi pogojne pripombe, tako da samo IE vidi sloge, vendar so malo verbalne in grdo. Dobra novica je, da bi morala Microsoftova nedavna odločitev, da spusti podporo za starejše različice IE-jev, tisti brati, ki ne podpirajo, kmalu izstopili, spletnim oblikovalcem pa bodo lažje uporabili sodobne pristope postavitve, kot je CSS FlexBox, ki bo naredila vse postavitve CSS, ne samo centriranje, ampak tudi lažje za vse oblikovalce spletnih mest.