Kako centrirati sliko navpično in vodoravno s CSS

Mnogi razvijalci se med delom s slikami spopadajo s težavami. Obravnava odzivnosti in poravnave je še posebej težka, še posebej centriranje slike na sredini strani.

V tej objavi bom torej prikazal nekaj najpogostejših načinov centriranja slike tako navpično kot vodoravno z uporabo različnih lastnosti CSS.

V prejšnjem prispevku sem preučil lastnosti in položaj prikaza CSS. Če teh lastnosti ne poznate, priporočam, da pred branjem tega članka preverite te objave.

Tukaj je video različica, če jo želite preveriti:

Horizontalno centriranje slike

Začnimo s centriranjem slike vodoravno z uporabo 3 različnih lastnosti CSS.

Poravnava besedila

Prvi način za vodoravno centriranje slike je uporaba text-alignlastnosti. Vendar ta metoda deluje samo, če je slika znotraj vsebnika na ravni bloka, kot je :

 div { text-align: center; } 

Rob: samodejno

Drug način za centriranje slike je z uporabo margin: autolastnosti (za levi in ​​desni rob).

Vendar margin: autosamo uporaba za slike ne bo delovala. Če morate uporabiti margin: auto, morate uporabiti še 2 lastnosti.

Lastnost margin-auto ne vpliva na elemente na ravni vrstice. Ker je oznaka vrstni element, jo moramo najprej pretvoriti v element na ravni bloka:

img { margin: auto; display: block; }

Drugič, določiti moramo tudi širino. Tako lahko levi in ​​desni rob zavzameta preostali prazen prostor in se samodejno poravna, kar je trik (razen če mu damo 100-odstotno širino):

img { width: 60%; margin: auto; display: block; }

Zaslon: Flex

Tretji način vodoravnega centriranja slike je z uporabo display: flex. Tako kot smo text-alignlastnost uporabili za vsebnik, uporabljamo tudi display: flexza vsebnik.

Vendar display: flexsamo uporaba ne bo dovolj. Vsebnik mora imeti tudi dodatno lastnost, imenovano justify-content:

div { display: flex; justify-content: center; } img { width: 60%; }

justify-contentLastnost deluje skupaj s display: flex, ki jo lahko uporabite za centriranje sliko vodoravno.

Končno mora biti širina slike manjša od širine vsebnika, sicer traja 100% prostora in je potem ne moremo centrirati.

Pomembno:display: flex lastnost ni podprta v starejših različicah brskalnika. Za več podrobnosti glejte tukaj.

Centriranje slike navpično

Zaslon: Flex

Za navpično poravnavo je uporaba display: flexspet zelo koristna.

Razmislite o primeru, ko ima naš vsebnik višino 800 slikovnih pik, vendar je višina slike le 500 slikovnih pik:

div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }

Zdaj, v tem primeru dodajanje ene vrstice kode v vsebnik align-items: center, naredi trik:

div { display: flex; justify-content: center; align-items: center; height: 800px; }

Pri align-itemspozicijski elementi lastnine možno vertikalno če se uporabljajo skupaj s display: flex.

Položaj: Absolute & Transform Properties

Druga metoda za navpično poravnavo je uporaba lastnosti positionin transformin. Ta je nekoliko zapletena, zato jo naredimo korak za korakom.

1. korak: Določite položaj Absolute

Najprej spremenimo vedenje položaja slike iz staticna absolute:

div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }

Prav tako mora biti znotraj razmeroma postavljenega vsebnika, zato position: relativev njegov vsebnik dodamo div.

2. korak: Določite lastnosti zgoraj in levo

Drugič, za sliko določimo zgornji in levi lastnosti ter ju nastavimo na 50%. To bo premaknilo začetno točko (zgoraj-levo) slike na sredino vsebnika:

img { width: 80%; position: absolute; top: 50%; left: 50%; }

3. korak: Določite lastnost pretvorbe

Toda drugi korak je sliko delno premaknil izven vsebnika. Torej ga moramo vrniti nazaj.

Določitev transformlastnosti in dodajanje -50% njene osi X in Y je trik:

img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Obstajajo tudi drugi načini za centriranje stvari vodoravno in navpično, vendar sem razložil najpogostejše. Upam, da vam je ta objava pomagala razumeti, kako poravnati slike na sredini strani.

Če želite izvedeti več o spletnem razvoju, obiščite moj Youtube kanal za več informacij.

Hvala za branje!