CSS ne ajută să controlăm afișarea imaginilor în aplicațiile web. Centrarea imaginilor sau a textelor este o sarcină comună în CSS. Pentru a centra o imagine, trebuie să setăm valoarea lui margine-stânga și margine-dreapta la auto și transformați-l într-un element bloc folosind afisare: bloc; proprietate.
Dacă imaginea este în elementul div, atunci putem folosi text-align: centru; proprietate pentru alinierea imaginii la centru în div.
The element se spune a fi un element inline care poate fi ușor centrat prin aplicarea text-align: centru; proprietatea CSS la elementul părinte care îl conține.
Notă: Imaginea nu poate fi centrată dacă lățimea este setată la 100% (lățime completă).
Putem folosi proprietatea stenografie marginea și setați-l la auto pentru alinierea imaginii la centru, mai degrabă decât utilizarea margine-stânga și margine-dreapta proprietate.
Să vedem cum să centrați o imagine prin aplicare text-align: centru; proprietate la elementul său părinte.
Exemplu
În acest exemplu, aliniem imaginile utilizând text-align: centru; proprietate. Imaginea este în elementul div.
div { border: 2px solid red; } img{ height: 300px; width: 300px; } #center { text-align: center; } <img src="//techcodeview.com/img/css-tutorial/36/how-center-images-css.webp"> Testează-l acum Ieșire
Exemplu
Acum, folosim margine-stânga: auto; margine-dreapta: auto; și afisare: bloc; proprietăți pentru alinierea imaginii la centru.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Testează-l acum Ieșire
