Acest ghid demonstrează procedura pentru alinierea orizontală și verticală folosind CSS.
Cum se aliniază orizontal și vertical folosind CSS?
Dezvoltatorii folosesc alinierea „orizontală” și „verticală” pentru a aranja și poziționa elementele pe o pagină web într-un mod mai organizat. Ele pot fi utile în alinierea elementelor și conținutului, poziționarea butoanelor sau pictogramelor etc. Urmați exemplele de mai jos pentru o mai bună înțelegere:
Aliniere orizontala
În CSS, proprietatea text-align este folosită pentru a alinia pe orizontală textul în cadrul elementului părinte. Vizitați fragmentele de cod de mai jos pentru o mai bună înțelegere:
< corp >
< div clasă = 'cont' >
< div clasă = „leftAlign” > Linuxhint este aliniat la stânga < / div >
< div clasă = 'centerAlign' > Linuxhint este Center Align < / div >
< div clasă = 'rightAlign' > Linuxhint este Right Align < / div >
< / div >
< / corp >
În fragmentul de cod de mai sus:
- În primul rând, părintele „ div elementul ” este utilizat cu un atribut de clasă având valoarea „ cont ”.
- Apoi, trei elemente copil au fost create și atributul de clasă a fost atribuit fiecărui div.
- În cele din urmă, valorile „leftAlign”, „centerAlign” și „rightAlign” sunt furnizate claselor.
Acum, inserați următoarele proprietăți CSS în „
.leftAlign {
afişa : inline-block ;
lăţime : 30% ;
umplutura : 20px ;
culoare de fundal : padure verde ;
aliniere text : stânga ;
}
.centerAlign {
afişa : inline-block ;
lăţime : 30% ;
culoare de fundal : roșu ;
umplutura : 20px ;
aliniere text : centru ;
}
.rightAlign {
afişa : inline-block ;
lăţime : 30% ;
culoare de fundal : teal ;
umplutura : 20px ;
aliniere text : dreapta ;
}
În blocul de cod de mai sus:
- În primul rând, toate cele trei clase sunt selectate separat, apoi aplică proprietățile CSS „ afişa ”, “ lăţime ”, “ culoare de fundal ' și ' umplutura ' lor. Aceste proprietăți sunt utilizate pentru a îmbunătăți scopurile de vizualizare.
- În continuare, valorile lui „ stânga ”, “ centru ' și ' dreapta ' sunt furnizate ' aliniere text ” proprietate la “ leftAlign ”, “ centerAlign ', și ' rightAlign ” clase, respectiv.
După procesul de compilare, elementele HTML arată astfel:
Instantaneul de mai sus a browserului arată că elementele sunt aliniate orizontal în pozițiile din stânga, centru și dreapta.
Aliniere verticală
CSS „ vertical-align ” proprietatea aliniază elementul selectat la “ axa y ” în cadrul elementului lor părinte. Valorile posibile pentru proprietatea „vertical-align” sunt „ de bază ”, “ sub ”, “ super ”, “ top ”, “ text-top ”, “ mijloc ”, “ fund ', și ' text-de jos ”. Cu toate acestea, dezvoltatorii folosesc în mare parte valorile „de sus”, „de mijloc” și „de jos” în timp ce creează design-uri de pagini web. Pentru a alinia elementul HTML selectat în poziția de sus, accesați fragmentul de cod de mai jos:
< div clasă = 'numara' >< img src = „hiunsplash.jpg” lăţime = '200px' înălţime = '200px' >
< span clasă = „captionTopAlign” > Acest text este aliniat sus vertical lângă imagine < / span >
< / div >
În fragmentul de cod de mai sus:
- În primul rând, creați un părinte „ div ” element și atribuiți o valoare de „ numara „la „ clasă ” atribut.
- În interiorul containerului părinte, utilizați „
” etichetați și furnizați calea imaginii ca valoare către „ src ” atribut.
- În plus, furnizați valoarea „ 200px ” atât pentru ” lăţime ' și ' înălţime ' atributele '
' etichetă.
- Apoi, utilizați „ ” etichetați și furnizați-i o clasă de „ captionTopAlign ”. În cele din urmă, furnizați-i date fictive.
Acum, adăugați proprietăți CSS pentru a stila elementele HTML:
.numara {lăţime : potrivire-conținut ;
afişa : bloc ;
margine-stânga : 100px ;
umplutura : 10px ;
frontieră : 2px solid roșu ;
}
.captionTopAlign {
vertical
În blocul de cod de mai sus:
- Mai întâi, selectați părintele „ numara ” și furnizați valorile „fit-content”, „block”, „100px”, „10px” și „2px solid red” la CSS „ lăţime ”, “ afişa ”, “ margine-stânga ”, “ umplutura ' și ' frontieră ” proprietăți. Aceste proprietăți sunt folosite pentru a stila elementul părinte.
- Apoi, selectați „ captionTopAlign ” și furnizează valoarea ” top ” la CSS ” vertical-align ” proprietate. Acest lucru face ca elementul HTML să se alinieze la poziția de sus.
După executarea liniilor de cod de mai sus, pagina web apare astfel:
Instantaneul de mai sus arată că elementul HTML selectat este acum aliniat în partea de sus. În același mod, elementul poate fi aliniat în direcțiile de mijloc, de jos etc.
Concluzie
Pentru alinierea orizontală și verticală, „ aliniere text ' și ' vertical-align ” Sunt utilizate, respectiv, proprietățile CSS. Proprietatea „text-align” permite valoarea lui „ stânga ”, “ dreapta ”, “ centru ' și ' justifica ”. Pe de altă parte, valorile posibile pentru proprietatea „vertical-align” sunt „ de bază ”, “ sub ”, “ super ”, “ top ”, “ text-top ”, “ mijloc ”, “ fund ', și ' text-de jos ”. Alinierea orizontală și verticală ajută la crearea de design web curat și profesional.