Afbeeldingen zijn een belangrijk onderdeel van elke webapplicatie. Het is over het algemeen niet aan te raden om veel afbeeldingen op te nemen in een webapplicatie, maar het is wel belangrijk om de afbeeldingen te gebruiken waar ze nodig zijn. CSS helpt ons de weergave van afbeeldingen in webapplicaties te controleren.
Een afbeelding uitlijnen betekent dat u de afbeelding in het midden, links en rechts positioneert. Wij kunnen gebruik maken van de vlot eigendom en tekst uitlijnen eigenschap voor de uitlijning van afbeeldingen.
Als de afbeelding zich in het div-element bevindt, kunnen we de tekst uitlijnen eigenschap voor het uitlijnen van de afbeelding in de div.
Voorbeeld
In dit voorbeeld lijnen we de afbeeldingen uit met behulp van de tekst uitlijnen eigendom. De afbeeldingen staan in het div-element.
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 het nu Uitvoer
Float-eigenschap gebruiken
De CSS float-eigenschap is een positioneringseigenschap. Het wordt gebruikt om een element naar links of rechts te duwen, waardoor andere elementen eromheen kunnen wikkelen. Het wordt over het algemeen gebruikt met afbeeldingen en lay-outs.
Elementen worden alleen horizontaal zwevend weergegeven. Het is dus alleen mogelijk om elementen naar links of rechts te laten zweven, niet omhoog of omlaag. Een zwevend element mag zo ver mogelijk naar links of rechts worden verplaatst. Het betekent eenvoudigweg dat een zwevend element uiterst links of uiterst rechts kan worden weergegeven.
Voorbeeld
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 het nu Uitvoer
