Aliniați și creați imagini plutitoare cu css, css

Cu html aliniere, imaginile pot fi aranjate și aliniate astfel încât să se afle într-un anumit loc pe pagină. Modul în care doriți să afișați imaginea determină dacă veți alinia imaginea sau o veți face să plutească.

Imaginile aliniate nu sunt înfășurate în jurul textului din jurul lor. Alinierea va plasa imaginea la stânga, la dreapta sau la centru, iar textul va fi plasat înainte și după imagine. Alinierea lasă un spațiu gol pe site.

O imagine plutitoare permite ca textul să curgă în jurul său, ca într-o carte sau ziar regulat. Imaginile pot fi plasate orizontal. Acest lucru este convenabil pentru afișarea imaginilor sub forma unei galerii. Următoarele arată modul de aliniere și realizare a imaginilor care plutesc cu CSS.

Aliniere stânga, dreapta și centru

Imaginile pot fi la stânga, la dreapta și la centru aliniate cu tag-ul div și cu stilul încorporat CSS. Textul nu se înfășoară în jurul imaginilor a căror containere au aplicată proprietatea de aliniere a textului HTML.

Alinierea stângă

Codul de mai jos aliniază imaginea la stânga:

Aliniați și creați imagini plutitoare cu css, css

Alinierea centrului

Următorul cod este destinat pentru centrarea imaginii:

Alinierea corectă

Următorul cod conține CSS pentru alinierea dreaptă (HTML aliniază dreapta):

Imagini plutitoare folosind CSS

Crearea imaginilor plutitoare vă permite să aranjați imaginile pe orizontală. Textul va curge în jurul imaginii.

Înfășurați textul cu textul din stânga

Important! Imaginile plutitoare se vor suprapune reciproc dacă proprietatea float nu este șters. Asigurați-vă că plasați codul pentru a șterge plutitorul după fiecare secțiune în care este localizată imaginea. Iată codul pentru a reseta valoarea proprietății float:

Textul înfășoară imaginea corectă

Plasați imaginile pe orizontală

Acest lucru va utiliza același cod de aliniere HTML. ca și înainte (a se vedea mai jos). Imaginile sunt plasate pur și simplu unul după altul pentru a face alinierea orizontală:

Imaginile plutitoare, plasate unul după altul, reprezintă o modalitate excelentă de a afișa imagini sub forma unei galerii. Acest lucru se încheie cu un articol despre modul de aliniere și poziționare a imaginilor utilizând CSS.

Traducerea articolului "Align and float images with CSS" a fost pregătită de o echipă prietenoasă a proiectului Saitostroenie de la A la Z.

Articole similare

Pagina anterioară

Pagina următoare