Kako centrirati sliku pomoću poravnanja teksta: Center

Programiranje

Element inline element (prikaz vrijednosti inline-block). Može se lako centrirati dodavanjem text-align: center;svojstva CSS nadređenom elementu koji ga sadrži.

Da biste centrirali sliku pomoću text-align: center;, morate smjestiti unutrašnjost elementa na razini bloka kao što je div. Budući da se text-alignsvojstvo odnosi samo na elemente na razini bloka, stavite text-align: center;na omotavajući element na razini bloka kako biste postigli vodoravno centrirano .

Primjer

   Center an Image using text align center  .img-container { text-align: center; }

Napomena: Nadređeni element mora biti blok element. Ako to nije element bloka, trebali biste dodatidisplay: block;svojstvo CSS zajedno satext-alignsvojstvom.

   Center an Image using text align center  .img-container { text-align: center; display: block; }

Demo: Codepen

Objekt prikladan

Nakon što se slika centrira, možda ćete joj htjeti promijeniti veličinu. U object-fitvlasništva propisuje kako Element odgovara na širina / visina od toga je nadređena kutiji.

Ovo se svojstvo može koristiti za slike, video zapise ili bilo koji drugi medij. Također se može koristiti sa object-positionsvojstvom za veću kontrolu nad načinom prikazivanja medija.

U osnovi koristimo object-fitsvojstvo da definiramo kako rasteže ili zgnječuje ugrađeni medij.

Sintaksa

.element

Vrijednosti

  • fill: Ovo je zadana vrijednost . Promijenite veličinu sadržaja tako da odgovara roditeljskom okviru bez obzira na omjer slike.
  • contain: Promijenite veličinu sadržaja tako da popuni nadređeni okvir koristeći ispravan omjer slike.
  • cover: slično kao i containčesto obrezivanje sadržaja.
  • none: prikaz slike u izvornoj veličini.
  • scale-down: usporedite razliku između nonei containkako biste pronašli najmanju veličinu konkretnog predmeta.

Kompatibilnost preglednika

object-fitPodržava većina modernih preglednika, za većinu ažurirane informacije o kompatibilnosti možete provjeriti ovaj vanjska strana //caniuse.com/#search=object-fit.

Dokumentacija

  • poravnanje teksta - MDN
  • objekt-fit - MDN
  • - MDN