CSS nam pomaga nadzorovati prikaz slik v spletnih aplikacijah. Centriranje slik ali besedil je običajna naloga v CSS. Za centriranje slike moramo nastaviti vrednost rob-levo in margin-desno do avto in ga naredite blok element z uporabo zaslon: blok; premoženje.
Če je slika v elementu div, potem lahko uporabimo poravnava besedila: sredina; lastnost za poravnavo slike na sredino div.
The element naj bi bil element v vrstici, ki ga je mogoče enostavno centrirati z uporabo poravnava besedila: sredina; lastnosti CSS na nadrejeni element, ki jo vsebuje.
Opomba: slike ni mogoče centrirati, če je širina nastavljena na 100 % (polna širina).
Uporabimo lahko lastnost stenografije marža in ga nastavite na avto za poravnavo slike na sredini, namesto da uporabite rob-levo in margin-desno premoženje.
Poglejmo, kako centriramo sliko z uporabo poravnava besedila: sredina; lastnost svojemu nadrejenemu elementu.
Primer
V tem primeru slike poravnamo z uporabo poravnava besedila: sredina; premoženje. Slika je v elementu 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"> Preizkusite zdaj Izhod
Primer
Zdaj uporabljamo rob-levo: samodejno; rob-desno: samodejno; in zaslon: blok; lastnosti za poravnavo slike na sredino.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Preizkusite zdaj Izhod
