Kako centrirati slike pomoću CSS-a

Želite centrirati sliku pomoću CSS-a? Problemi s usklađivanjem često su izvor frustracija za web dizajnere. Srećom, centriranje slike pomoću CSS-a je vrlo jednostavno, a mi ćemo vam pokazati kako to učiniti u nekoliko koraka.

Kao i kod mnogih zadataka web dizajna, postoji više od jednog načina da to učinite! U ovom članku ćemo pokriti tri glavne metode. Započnimo!

1. Koristite svojstvo margine

Postavljanje margina svojstvo je jedan od najjednostavnijih načina za vodoravno centriranje slike pomoću CSS-a. Marže su temeljna komponenta CSS box model.

Prvo, morat ćete transformirati element slike iz umetnutog u blok. HTML elementi na razini bloka zauzimaju punu širinu svog nadređenog elementa i sposobni su zauzeti cijelu širinu stranice.

Ako element slike napravite blok elementom, možete manipulirati njegovim položajem podešavanjem njegovih horizontalnih margina. Također ćete morati postaviti određenu širinu za sliku kako biste odredili koliko prostora slika zauzima na stranici.

Koju god širinu odaberete, slika će morati imati jednake lijeve i desne margine. To možete lako postići tako da svojstvu marže date vrijednost od

auto:

img.center {
 zaslon: blok;
 margin-left: auto;
 margin-desno: auto;
 širina: 800px;
}

2. Koristite Flexbox Layout

Ova metoda zahtijeva stavljanje slike u element na razini bloka, obično a razd:

Nakon što to učinite, možete dodati neka svojstva kako biste manipulirali njegovim izgledom. Koristit ćete dva CSS svojstva.

Prvi je prikaz svojstvo čija je vrijednost postavljena na savijati. Također možete koristite flex za poravnavanje elemenata u HTML-u. Drugo svojstvo koje ćete dodati svom div je opravdati-sadržaj, s vrijednošću postavljenom na centar ovako:

div.center {
 zaslon: flex;
 justify-content: centar;
}

3. Koristite zastarjeli središnji element

Najbolji primjeri iz prakse na webu potiču vas da koristite CSS za oblikovanje i HTML za semantiku, tako da ne biste trebali koristiti ovu HTML metodu. The centar oznaka, koja centrira svoj sadržaj vodoravno, zastarjela je u HTML5.

Ali ako morate, evo kako centrirati sliku koristeći samo HTML. Jednostavno zamotajte img oznaka u središnjoj oznaci ovako:

Evo kako uskladiti svoje slike u HTML-u

Pokazali smo vam tri različite metode centriranja slika u HTML dokumentu jednostavne za korištenje. Isprobajte ih sve i odaberite onaj koji vam najviše odgovara. Izbjegavajte treću metodu osim ako nemate apsolutno nikakvog izbora!

Jedna stvar koju treba imati na umu je da postoji još dosta načina za centriranje slika pomoću HTML-a i CSS-a. Jedna uobičajena metoda koja radi i za tekst i za umetnute slike je poravnati tekst imovine.

Kako centrirati tekst na vašoj web stranici pomoću CSS-a

Pročitajte dalje

O autoru