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:
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.