Kako centrirati sliko s poravnavo besedila: Center

Element je inline element (izpis vrednost inline-block). Enostavno ga je mogoče centrirati z dodajanjem text-align: center;lastnosti CSS nadrejenemu elementu, ki ga vsebuje.

Če želite sliko centrirati s pomočjo text-align: center;, morate postaviti notranjost elementa na ravni bloka, kot je div. Ker text-alignlastnost velja samo za elemente na ravni bloka, postavite text-align: center;element zavijanja na ravni bloka, da dosežete vodoravno centrirano .

Primer

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

Opomba: Nadrejeni element mora biti element bloka. Če ne gre za element bloka, dodajtedisplay: block;lastnost CSS skupaj ztext-alignlastnostjo.

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

Predstavitev: Codepen

Objekt ustreza

Ko je slika centrirana, jo boste morda želeli spremeniti. Na object-fitlastnine določa, kako odzove element na širino / višino, da je matična polje.

Ta lastnost se lahko uporablja za slike, video ali katere koli druge medije. Uporabite ga lahko tudi z object-positionlastnostjo, da dobite več nadzora nad prikazom medija.

V bistvu uporabljamo object-fitlastnost, da določimo, kako raztegne ali stisne vstavljeni medij.

Sintaksa

.element

Vrednote

  • fill: To je privzeta vrednost . Spremenite velikost vsebine tako, da se ujema z nadrejenim poljem, ne glede na razmerje stranic.
  • contain: Spremenite velikost vsebine tako, da zapolni nadrejeno polje s pravilnim razmerjem stranic.
  • cover: podobno kot containpogosto izrezovanje vsebine.
  • none: prikaže sliko v prvotni velikosti.
  • scale-down: primerjajte razliko med nonein containpoiščite najmanjšo velikost konkretnega predmeta.

Združljivost brskalnika

object-fitPodpira večina sodobnih brskalnikov, za najbolj posodobljene informacije o združljivosti lahko to odjaviti //caniuse.com/#search=object-fit.

Dokumentacija

  • poravnava besedila - MDN
  • object-fit - MDN
  • - MDN