CSS: Középső kép

A kép CSS-ben középre helyezése nem teljesen triviális. Elmagyarázzuk, hogyan tudod mégis elsajátítani a feladatot.)

kijelző

Ebben a tippek+trükkök cikkben bemutatjuk a kép függőleges és vízszintes középre állításának leggyakoribb módszereit, különböző CSS-tulajdonságokkal. Olvasson el mindent, amit erről tudnia kell az alábbiakban.

  • A kép vízszintes középre állítása
  • A kép függőleges középre állítása

Hogyan lehet vízszintesen középre helyezni egy képet CSS-ben

Három lehetőséget állítottunk össze, amelyek segítségével CSS-t használhat a kép webhelyén való középre állításához:

  • Margó: autó
  • szöveg igazítás
  • Kijelző: Flex

Margó: autó

A kép vízszintes igazításának első módja a margó: auto használata. Ez a bal margó és a jobb margó tulajdonságait automatikusra állítja, és segít a központosításban. A használat azonban nem működik automatikusan képeknél, mivel ezek soron belüli elemek. A CSS-kódban található display:block paranccsal a képek könnyen blokkolható elemekké alakíthatók. Ekkor az automatikus igazítás is működik.

Meg kell határoznia a kép szélességét is - ami ennek megfelelően nem 100% -, hogy a kép automatikusan igazodjon a bal és a jobb széllel.

Példa a CSS-ben: