Mnogi se programeri muče dok rade sa slikama. Rukovanje odzivom i poravnavanjem posebno je teško, posebno centriranjem slike na sredini stranice.
Dakle, u ovom postu pokazat ću neke od najčešćih načina centriranja slike vertikalno i vodoravno pomoću različitih CSS svojstava.
Prošao sam CSS svojstva položaja i prikaza u svom prethodnom postu. Ako niste upoznati s tim svojstvima, preporučujem provjeru tih postova prije čitanja ovog članka.
Evo video verzije ako je želite provjeriti:
Horizontalno centriranje slike
Počnimo s centriranjem slike vodoravno pomoću 3 različita CSS svojstva.
Poravnanje teksta
Prvi način centriranja slike vodoravno je korištenje text-alignsvojstva. Međutim, ova metoda djeluje samo ako se slika nalazi u spremniku na razini bloka, poput :
div { text-align: center; } Marža: Automatski
Drugi način centriranja slike je pomoću margin: autosvojstva (za lijevu i desnu marginu).
Međutim, margin: autosamo korištenje neće raditi za slike. Ako trebate koristiti margin: auto, postoje još 2 svojstva koja također morate koristiti.
Svojstvo margin-auto nema učinka na elemente na razini retka. Budući da je
img { margin: auto; display: block; }Drugo, također moramo definirati širinu. Dakle, lijeva i desna margina mogu zauzeti ostatak praznog prostora i automatski se poravnati, što čini trik (osim ako mu ne damo širinu od 100%):
img { width: 60%; margin: auto; display: block; }Zaslon: Flex
Treći način vodoravnog centriranja slike je pomoću display: flex. Baš kao što smo koristili text-alignsvojstvo za spremnik, koristimo i display: flexza spremnik.
Međutim, display: flexsamo korištenje neće biti dovoljno. Spremnik također mora imati dodatno svojstvo koje se naziva justify-content:
div { display: flex; justify-content: center; } img { width: 60%; }justify-contentNekretnina radi zajedno s display: flexkoje možemo koristiti za centriranje slike horizontalno.
Napokon, širina slike mora biti manja od širine spremnika, u suprotnom zauzima 100% prostora i tada je ne možemo centrirati.
Važno:display: flex svojstvo nije podržano u starijim verzijama preglednika. Pogledajte ovdje za više detalja.
Centriranje slike okomito
Zaslon: Flex
Za vertikalno poravnanje upotreba display: flexje opet stvarno korisna.
Razmotrimo slučaj kada naš spremnik ima visinu od 800px, ali visina slike je samo 500px:
div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }U ovom slučaju, dodavanje jednog retka koda u spremnik align-items: center, izvršava trik:
div { display: flex; justify-content: center; align-items: center; height: 800px; }U align-itemselementi pozicija imovine može vertikalno, ako se koriste zajedno s display: flex.
Položaj: Apsolutna i svojstva transformacije
Drugi način za okomito poravnanje je pomoću gumba positioni transformsvojstva zajedno. Ovaj je malo kompliciran, pa učinimo to korak po korak.
Korak 1: Definirajte apsolutni položaj
Prvo, mijenjamo ponašanje položaja slike sa staticna absolute:
div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }Također, trebao bi biti unutar relativno pozicioniranog spremnika, pa dodajemo position: relativeu njegov spremnik div.
Korak 2: Definirajte gornja i lijeva svojstva
Kao drugo, definiramo gornja i lijeva svojstva slike i postavljamo ih na 50%. Ovo će pomaknuti početnu točku (gore-lijevo) slike u središte spremnika:
img { width: 80%; position: absolute; top: 50%; left: 50%; }Korak 3: Definirajte svojstvo transformacije
Ali drugi je korak pomaknuo sliku djelomično izvan spremnika. Zato ga moramo vratiti unutra.
Definiranje transformsvojstva i dodavanje -50% njegovoj osi X i Y čini trik:
img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }Postoje i drugi načini centriranja stvari vodoravno i okomito, ali objasnio sam najčešće. Nadam se da vam je ovaj post pomogao da shvatite kako poravnati slike u sredini stranice.
Ako želite saznati više o web razvoju, slobodno posjetite moj Youtube kanal za više informacija.
Hvala na čitanju!