Kép központosítása a szöveg igazításával: középre

Programozás

Az elem egy soros elem (a megjelenített értéke inline-block). Könnyen központosítható a text-align: center;CSS tulajdonság hozzáadásával az azt tartalmazó szülő elemhez.

A kép központosításához egy blokk szintű elem belsejét text-align: center;kell elhelyeznie , például a div. Mivel a text-aligntulajdonság csak blokkszintű elemekre vonatkozik, text-align: center;a burkoló blokkszintű elemre helyezve vízszintesen középre kerül .

Példa

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

Megjegyzés: A szülőelemnek blokkelemnek kell lennie. Ha ez nem blokk elem, akkor hozzá kell adnia adisplay: block;CSS tulajdonságot a tulajdonsággal együtttext-align.

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

Bemutató: Codepen

Object Fit

Miután a kép középre került, érdemes átméretezni. A object-fittulajdonság megadja, hogy az elem hogyan reagál a szülődobozának szélességére / magasságára.

Ez a tulajdonság használható képekhez, videókhoz vagy bármely más adathordozóhoz. A object-positiontulajdonsággal együtt is használható, hogy jobban ellenőrizhesse a média megjelenítését.

Alapvetõen a object-fittulajdonságot használjuk annak meghatározására, hogy miként nyújtja vagy széthúzza az inline adathordozókat.

Szintaxis

.element

Értékek

  • fill: Ez az alapértelmezett érték . Átméretezze a tartalmat úgy, hogy megfeleljen a szülődobozának, a képaránytól függetlenül.
  • contain: A megfelelő méretarány használatával méretezze át a tartalmat, hogy kitöltse a szülődobozát.
  • cover: hasonló, containde gyakran levágja a tartalmat.
  • none: a kép megjelenítése az eredeti méretben.
  • scale-down: hasonlítsa össze a különbséget noneés containtalálja meg a legkisebb konkrét tárgyméretet.

Böngésző kompatibilitás

Ezt object-fita legtöbb modern böngésző támogatja, a kompatibilitással kapcsolatos legfrissebb információkért nézze meg ezt a //caniuse.com/#search=object-fit oldalon.

Dokumentáció

  • text-align - MDN
  • object-fit - MDN
  • - MDN