Cum să aliniați imaginile și textul în mod receptiv

Pasul 2: Aplicați CSS

Pe container:

• Acum, centrați conținutul aplicând CSS la „ Container ” clasa.
• Seteaza ' contracta „valoarea proprietății” afişa ” pentru a crea un flexbox.
• Seteaza „articole-aliniere ” proprietate la “ centru ” pentru a centra vertical alinierea.
• Seteaza ' justifica-conținut ” valoarea proprietății la „center” pentru a centra orizontal alinierea.
• În sfârșit, specificați valoarea „ centru „la proprietate” aliniere text ” pentru a centra textul.

Pe :

• Specifică ' lățimea maximă „proprietate la valoarea „ centru ” pentru a se asigura că imaginea este scalată împreună cu containerul său.
• Specificați valoarea „ auto „la „ înălţime ” pentru a menține raportul de aspect al imaginii.

Pe text:

• Setați dimensiunea fontului textului la „ 16px ” prin specificarea valorii „16px” la „ marimea fontului ”.
• Definiți lățimea textului prin atribuirea „ lățimea maximă ” proprietate o valoare de ” 390px ”:

Se poate observa că textul este centrat vertical, iar imaginea este centrată pe orizontală:

Exemplul 2: Aliniați la stânga textul și imaginea receptivă

În acest exemplu dat, imaginea și textul vor fi aliniate la stânga. În acest scop, parcurgeți instrucțiunile de mai jos:

Pasul 1: Creați o structură HTML

Codul HTML este același ca mai sus, folosit în exemplu.

Pasul 2: Aplicați CSS

Pe container:

• Seteaza ' flex-direcție „valoarea proprietății la „ coloană ” pentru a stivui articole vertical pe ecrane mici.
• Seteaza ' alinierea elementelor „valoarea proprietății la „ flex-start ” la stânga pentru a alinia elementele.
• În cele din urmă, setați proprietatea „ aliniere text ” la “ stânga ” pentru a alinia textul la stânga.

Pe :

• La fel ca în exemplul de mai sus.

Pe text:

• La fel ca în exemplul de mai sus:

Rezultatul confirmă faptul că textul și imaginea sunt aliniate la stânga:

Concluzie

Pentru a alinia imaginile și textul în mod receptiv, mai întâi, creați o grilă sau un aspect flexibil în CSS, apoi setați „ element-aliniere „valoarea proprietății la „ centru ”. Procedând astfel, imaginile și textul vor alinia în mod receptiv în CSS. Acest articol a oferit utilizatorilor un ghid complet pentru a alinia imaginile și textul în mod receptiv.