Igazítson és hozzon létre úszó képeket css, css segítségével

Az html összehangolásával a képeket elrendezheti és igazíthatja úgy, hogy egy bizonyos hely legyen az oldalon. A kép megjelenítésének módja határozza meg, hogy igazítja-e a képet vagy lebeg.

Az összehangolt képeket nem körbeveri a szöveg körül. Az igazítás a képet balra, jobbra vagy középre helyezi, és a szöveget a kép előtt és után helyezik el. Az igazítás egy kis üres helyet hagy a webhelyen.

A lebegő kép lehetővé teszi, hogy a szöveg magához térjen, mint egy rendszeres könyvben vagy újságban. A képeket vízszintesen lehet elhelyezni. Ez alkalmas a képek galériában való megjelenítésére. Az alábbiakban bemutatjuk, hogyan kell a CSS-hez lebegő képeket összehangolni.

Balra, jobbra és középre igazításra

A képek balra, jobbra és középre igazíthatók a div tag és a beépített CSS stílus között. A szöveg nem kerüli el azokat a képeket, amelyek tárolóeszközei a HTML szöveges igazítási tulajdonsággal rendelkeznek.

Bal összehangolás

Az alábbi kód igazítja a képet balra:

Igazítson és hozzon létre úszó képeket css, css segítségével

Központ összehangolása

A következő kód a kép központosítására szolgál:

Igazítson és hozzon létre úszó képeket css, css segítségével

Jobb összehangolás

A következő kód CSS-t tartalmaz a jobb oldali igazításhoz (HTML align right):

Igazítson és hozzon létre úszó képeket css, css segítségével

Lebegő képek a CSS használatával

Lebegő képek készítése lehetővé teszi a képek vízszintes elrendezését. A szöveg a kép körül folyik.

Tekerje a szöveget a bal oldali szöveggel

Igazítson és hozzon létre úszó képeket css, css segítségével

Fontos! A lebegő képek átfedik egymást, ha az úszó tulajdonság nincs törölve. Győződjön meg róla, hogy helyezi a kódot, hogy törölje az úszót minden olyan szakasz után, amelyikben a kép található. Itt van a kód az úszó tulajdonság értékének visszaállításához:

Szöveg wrap kép jobbra

Igazítson és hozzon létre úszó képeket css, css segítségével

Helyezze a képeket vízszintesen

Ez ugyanazt a HTML-igazítási kódot fogja használni. mint korábban (lásd alább). A képeket egyszerűen egymás után helyezzük el, hogy az illesztést vízszintesen hozzuk létre:

Igazítson és hozzon létre úszó képeket css, css segítségével

Az egymás után elhelyezett, lebegő képek remek módja a képek galériában való megjelenítésének. Ezzel egy cikk jelenik meg, amely a CSS használatával igazítja és állítja be a képeket.

A "CSS-hez igazítás és lebegés" c. Cikk fordítását a Saitostroenie projekt A-tól Z-ig terjedő barátságos csapata készítette el.

Kapcsolódó cikkek