Hogyan készítsünk képet Div központjában

Hogyan igazolhatjuk a képeket a központban?

Tehát, mint bármely új kezdő brander, probléma merült fel: hogyan Align képek a központban Weboldalak? És vannak olyan trükkök, mint a középcímke használata, ami annyira elavult, hogy nem szükséges beszélni róla.

A leggyakrabban a HTML és a CSS-ben használt megoldást.

1. módszer

A legegyszerűbb módja egy képosztály hozzárendelése, majd a CSS segítségével, készítsen egy képblokkot, majd állítsa be az automatikus igazítást a jobb és a bal oldalon.

Html

1	IMG SRC = “HAB” ALT = “CENTER” CLASS = “CENTER-IMG” kép /

CSS

.Center-img { Kijelző: blokk; Margó: 0auto; }

By the way, ez a módszer lehetővé teszi bármilyen blokk elemek igazítását: div, p, címsorok.

És azonnal nézd meg a gyakorlati szintezést:

Tekintse meg az Alex (@ammDey) képeinek tollatáblázatát a codepenen.

Ez a módszer kényelmes, mert automatikusan hordozzuk a képet a következő sorba (amikor megkérdezték a kijelzőt: blokk), és az a tény, hogy beállíthatjuk a szöveget a szövegből felülről és alulról a margó tulajdonságok megváltoztatásával.

Szintezési módszer 2

Második út, Kép igazítás – Ez a szoba a bekezdésben szereplő kép, amelyet egy osztályhoz rendelünk. Ezt követően kérje meg a szöveg beillesztését a központban.

Html

P Class = “Center-img” IMG SRC = “HAB” ALT = “A kép középpontja” / P

CSS

.Center-img { Szöveg-igazítás: Központ; }

És a gyakorlatban:

Lásd a Toll Alignment Image Módszer 2-et a 2-es (@ammodey) a Codepen-en.

Ebben az esetben a CSS-kód tömörebb, de a HTML több elemet tartalmaz. Ha tetszik – Használja.

Harmadik módon

Ez az opció új szemantikai HTML5 címkéken alapul, és ajánlott használni, ha lehetősége van (és szükség van), hogy a képet az ábracímkében csomagolja.

Szóval van egy kép egy aláírással a címke ábrán. Az ábrán és # óta; Ez egy blokk elem, akkor csak kérdezze meg, hogy illeszkedjen a központban.

Html

Ábra IMG SRC = “HAB” ALT = “A kép középpontja” Figbaption Cat / FigKaption / Ábra

CSS

Ábra { Szöveg-igazítás: Központ; }

És a gyakorlatban

Lásd a toll alakja igazítás a központban Alex (@ammodey) a Codepen.

Következtetés: három egyszerű módon néztünk Illessze a képet a HTML oldalak közepén CSS-vel. Ha vannak kérdések – írni.

Kategória: HTML és CSS. dátum