Billeder er en vigtig del af enhver webapplikation. Det anbefales generelt ikke at inkludere mange billeder i en webapplikation, men det er vigtigt at bruge billederne, hvor de har brug for det. CSS hjælper os med at kontrollere visningen af billeder i webapplikationer.
At justere et billede betyder at placere billedet i midten, venstre og højre. Vi kan bruge flyde ejendom og tekstjustering egenskab til justering af billeder.
Hvis billedet er i div-elementet, så kan vi bruge tekstjustering egenskab til at justere billedet i div.
Eksempel
I dette eksempel justerer vi billederne ved at bruge tekstjustering ejendom. Billederne er i div-elementet.
turbo c++ download
div { border: 2px solid red; } img{ height: 250px; width: 250px; } #left { text-align: left; } #center { text-align: center; } #right{ text-align: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> Test det nu Produktion
Brug af float-egenskab
CSS-float-egenskaben er en positioneringsegenskab. Det bruges til at skubbe et element til venstre eller højre, så andre elementer kan vikle sig rundt om det. Det bruges generelt med billeder og layouts.
chmod 755
Elementer flyder kun vandret. Så det er kun muligt at flyde elementer til venstre eller højre, ikke op eller ned. Et flydende element kan flyttes så langt til venstre eller højre som muligt. Det betyder ganske enkelt, at et flydende element kan vises yderst til venstre eller yderst til højre.
Eksempel
img{ height: 200px; width: 250px; border: 7px ridge blue; } #left{ float: left; } #right{ float: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="left"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="right"> Test det nu Produktion
