Kako s CSS centrirati slike in druge predmete HTML

click fraud protection

Kaj vedeti

  • Za centriranje besedila uporabite naslednjo kodo ("[/]" označuje prelom vrstice): .center {[/] poravnava besedila: center; [/] }.
  • Središčni bloki vsebine z naslednjo kodo ("[/]" pomeni prelom vrstice): .center {[/] marža: samodejno; [/] širina: 80em; [/] }.
  • Če želite sliko centrirati ("[/]" pomeni prelom vrstice): img.center {[/] zaslon: blok; [/] rob-levo: samodejno; [/] margin-right: auto; [/] }.

CSS je najboljši način za centriranje elementov, vendar je lahko izziv za začetnike spletnih oblikovalcev, saj obstaja toliko načinov, kako to doseči. V tem članku je razloženo, kako uporabljati CSS za centriranje besedila, blokov besedila in slik.

Centriranje besedila s CSS

Za centriranje besedila na strani morate poznati le eno lastnost sloga:

.center {
poravnava besedila: sredina;
}

S to vrstico CSS bo vsak odstavek, zapisan z razredom .center, centriran vodoravno znotraj nadrejenega elementa. Na primer, odstavek znotraj oddelka (podrejeni del tega oddelka) bi bil centriran vodoravno znotraj.

instagram viewer

Tu je primer tega razreda, uporabljenega v dokumentu HTML:

To besedilo je na sredini.


Ko centrirate besedilo z lastnostjo poravnave besedila, ne pozabite, da bo poravnano znotraj elementa, ki ga vsebuje, in ne nujno na celotni strani.

Pri besedilu spletnega mesta je berljivost vedno ključna. Velik bloki sredinsko poravnanega besedila je težko brati, zato ta slog uporabljajte zmerno. Naslove in majhne bloke besedila, kot je na primer besedilo dražljaja za članek, je običajno enostavno brati, če jih osredinite; vendar bi bilo večje bloke besedila, na primer celoten članek, težko izkoristiti, če bi bili popolnoma upravičeni po sredini.

Centriranje vsebinskih blokov s CSS

Bloki vsebine se ustvarijo z uporabo HTML-ja.

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

Ta kratica CSS za lastnost roba bi nastavila zgornji in spodnji rob na vrednost 0, medtem ko bi levi in ​​desni uporabili "samodejno". To v bistvu zavzame ves prostor, ki je na voljo, in ga enakomerno razdeli med dve strani okna okna za prikaz, tako da element učinkovito centrira na strani.

Tukaj se uporablja v HTML-ju:

Celoten blok je centriran,
vendar je besedilo v njem poravnano levo.

Dokler ima vaš blok določeno širino, se bo centriral znotraj vsebujočega elementa. Besedilo, ki ga vsebuje ta blok, v njem ne bo centrirano, ampak bo poravnano levo. To je zato, ker je besedilo privzeto v spletnih brskalnikih poravnano levo. Če želite, da je tudi besedilo centrirano, lahko za centriranje delitve uporabite lastnost poravnave besedila, ki je bila prej zajeta v povezavi s to metodo.

Centriranje slik s CSS

Čeprav bo večina brskalnikov prikazala slike, centrirane z isto lastnostjo poravnave besedila, W3C tega ne priporoča. Zato vedno obstaja verjetnost, da bodo prihodnje različice brskalnikov ignorirale to metodo.

Namesto da uporabite poravnavo besedila za centriranje slike, morate brskalniku izrecno povedati, da je slika element na ravni bloka. Na ta način ga lahko centrirate tako kot kateri koli drug blok. Tukaj je CSS, da se to zgodi:

img.center {
zaslon: blok;
rob-levo: samodejno;
rob desno: samodejno;
}

In tukaj je HTML za sliko, ki jo je treba centrirati:


Objekte lahko tudi centrirate z uporabo vdelanega CSS-ja (glejte spodaj), vendar ta pristop ni priporočljiv, ker doda oznake HTML v vizualne sloge. Ne pozabite, slog in struktura morata biti ločena; dodajanje slogov CSS v HTML bo to ločitev prekinilo, zato se ji izogibajte, kadar je le mogoče.


Centriranje elementov navpično s CSS

Centriranje predmetov navpično je bilo pri spletnem oblikovanju vedno izziv, vendar je izdaja Modul za prilagodljivo postavitev škatle CSS v CSS3 ponuja način za to.

Navpična poravnava deluje podobno kot poravnana zgoraj. Lastnost CSS je poravnana navpično, takole:

.vcenter {
navpična poravnava: sredina;
}

Vsi sodobni brskalniki podpira ta slog CSS. Če imate težave s starejšimi brskalniki, W3C priporoča, da besedilo poravnate navpično v vsebnik. Če želite to narediti, postavite elemente v element, ki vsebuje element, kot je div, in na njem nastavite minimalno višino. Element, ki ga vsebuje, prijavite kot celico tabele in navpično poravnavo nastavite na "sredina".

Tu je na primer CSS:

.vcenter {
min-višina: 12em;
zaslon: celica tabele;
navpična poravnava: sredina;
}

In tukaj je HTML:


To besedilo je v polju navpično centrirano.


Ne uporabljajte elementa HTML za centriranje slik in besedila; je zastarel, sodobni spletni brskalniki pa ga ne podpirajo več. To je v veliki meri odgovor na jasno ločitev strukture in sloga v HTML5: HTML ustvarja strukturo, CSS pa narekuje slog. Ker je centriranje vizualna značilnost elementa (kako je videti, ne pa kakšen je), se ta slog obravnava s CSS in ne s HTML. Namesto tega uporabite CSS, da se bodo vaše strani pravilno prikazovale in ustrezale sodobnim standardom.

Navpično centriranje in starejše različice Internet Explorerja

Internet Explorer (IE) lahko prisilite, da se centrira in nato uporabite pogojne komentarje, tako da samo IE vidi sloge, vendar so nekoliko podrobni in nezanimivi. Odločitev Microsofta iz leta 2015, da opusti podporo za starejše različice IEvendar bo to postalo vprašanje, ko IE ne bo več v uporabi.

instagram story viewer