Kako koristiti CSS za centriranje slika i ostalih HTML objekata

Znanost, Tehnologija, MatematikaJun 23, 2021
click fraud protection

Što znati

  • Za centriranje teksta upotrijebite sljedeći kod ("[/]" označava prijelom retka): .center {[/] poravnanje teksta: center; [/] }.
  • Središnji blokovi sadržaja sa sljedećim kodom ("[/]" označava prijelom retka): .center {[/] margina: auto; [/] širina: 80em; [/] }.
  • Za centriranje slike ("[/]" označava prijelom retka): img.center {[/] prikaz: blok; [/] margina-lijevo: automatski; [/] margin-right: auto; [/] }.

CSS je najbolji način za centriranje elemenata, ali za početnike web dizajnere može biti izazov jer postoji toliko mnogo načina da se to postigne. Ovaj članak objašnjava kako koristiti CSS za centriranje teksta, blokova teksta i slika.

Centriranje teksta pomoću CSS-a

Morate znati samo jedno svojstvo stila za centriranje teksta na stranici: 

.center {
poravnanje teksta: središte;
}

Uz ovaj redak CSS-a, svaki odlomak napisan s .center klasom bit će centriran vodoravno unutar svog nadređenog elementa. Na primjer, odlomak unutar odjeljenja (podređeni dio tog odjeljenja) bio bi centriran vodoravno unutar.

instagram viewer

Evo primjera ove klase primijenjene u HTML dokumentu:

Ovaj je tekst centriran.


Kada centrirate tekst sa svojstvom text-align, imajte na umu da će biti centriran unutar svog elementa koji sadrži, a ne nužno centriran unutar same stranice.

Čitljivost je uvijek ključna kada je riječ o tekstu web stranice. Veliki blokovi teksta koji je opravdan središnjim dijelom može biti teško čitati, pa štedite ovaj stil. Naslovi i mali blokovi teksta, poput najavnog teksta za članak, obično su jednostavni za čitanje kad su centrirani; međutim, veće blokove teksta, poput cjelovitog članka, bilo bi izazovno konzumirati ako su u potpunosti opravdani središtem.

Centriranje blokova sadržaja pomoću CSS-a

Blokovi sadržaja kreiraju se pomoću HTML-a. 

.center {
marža: auto;
širina: 80em;
}

Ovaj CSS skraćenica za margin svojstvo postavila bi gornju i donju marginu na vrijednost 0, dok bi lijeva i desna koristile "auto". Ovaj u osnovi zauzima bilo koji dostupan prostor i ravnomjerno ga dijeli između dvije strane prozora okvira za prikaz, učinkovito centrirajući element na stranica.

Ovdje se primjenjuje u HTML-u:

Cijeli ovaj blok je centriran,
ali je tekst unutar njega poravnat lijevo.

Sve dok vaš blok ima definiranu širinu, on će se centrirati unutar sadržećeg elementa. Tekst sadržan u tom bloku neće biti centriran unutar njega, već će biti poravnat s lijeve strane. To je zato što je tekst poravnat s lijeve strane kao zadani u web preglednicima. Ako želite da i tekst bude centriran, za centriranje podjele možete upotrijebiti svojstvo poravnanja teksta pokriveno ranije u vezi s ovom metodom.

Centriranje slika pomoću CSS-a

Iako će većina preglednika prikazivati ​​slike usredotočene pomoću istog svojstva poravnanja teksta, W3C to ne preporučuje. Stoga uvijek postoji šansa da bi buduće verzije preglednika mogle ignorirati ovu metodu.

Umjesto da koristite poravnanje teksta za centriranje slike, trebali biste izričito reći pregledniku da je slika element na razini bloka. Na taj ga način možete centrirati kao bilo koji drugi blok. Evo CSS-a kako bi se ovo dogodilo: 

img.center {
prikaz: blok;
margina-lijevo: auto;
margina-desno: auto;
}

Evo i HTML-a za centriranje slike:


Objekte također možete centrirati pomoću ugrađenog CSS-a (vidi dolje), ali ovaj se pristup ne preporučuje jer dodaje vizualne stilove u vaše HTML oznake. Zapamtite, stil i struktura trebaju biti odvojeni; dodavanje CSS stilova u HTML prekinut će to razdvajanje i, kao takvo, trebali biste ga izbjegavati kad god je to moguće.


Centriranje elemenata okomito s CSS-om

Centriranje objekata okomito uvijek je bilo izazovno u web dizajnu, ali izdanje CSS modul fleksibilnog rasporeda okvira u CSS3 pruža način za to.

Vertikalno poravnanje djeluje slično vodoravnom poravnanju pokrivenom gore. CSS svojstvo je okomito poravnato, ovako: 

.vcenter {
okomito poravnanje: sredina;
}

Svi moderni preglednici podržati ovaj CSS stil. Ako imate problema sa starijim preglednicima, W3C preporučuje da tekst uspravno centrirate u spremnik. Da biste to učinili, stavite elemente unutar elementa koji sadrži, kao što je div, i na njemu postavite minimalnu visinu. Deklarirajte element koji sadrži kao ćeliju tablice i postavite okomito poravnanje na "sredinu".

Na primjer, ovdje je CSS: 

.vcenter {
min-visina: 12em;
prikaz: tablica-ćelija;
okomito poravnanje: sredina;
}

I evo HTML-a:


Ovaj je tekst okomito centriran u okvir.


Nemojte koristiti HTML element za centriranje slika i teksta; zastario je, a moderni ga web preglednici više ne podržavaju. To je velikim dijelom odgovor na HTML5-ovo jasno razdvajanje strukture i stila: HTML stvara strukturu, a CSS diktira stil. Budući da je centriranje vizualna karakteristika elementa (kako izgleda, a ne kakav jest), taj se stil obrađuje sa CSS-om, a ne s HTML-om. Umjesto toga koristite CSS kako bi se vaše stranice pravilno prikazivale i usklađivale s modernim standardima.

Okomito centriranje i starije verzije Internet Explorera

Internet Explorer (IE) možete prisiliti na centriranje, a zatim upotrijebiti uvjetne komentare tako da samo IE vidi stilove, ali oni su pomalo opširni i nezanimljivi. Odluka Microsofta iz 2015. da odustane od podrške za starije verzije IEmeđutim, ovo će biti ne-pitanje jer IE izlazi iz upotrebe.

instagram story viewer