CSS helpt ons de weergave van afbeeldingen in webapplicaties te controleren. Het centreren van afbeeldingen of teksten is een veel voorkomende taak in CSS. Om een afbeelding te centreren, moeten we de waarde instellen van marge-links En marge-rechts naar auto en maak er een blokelement van met behulp van de weergave: blok; eigendom.
Als de afbeelding zich in het div-element bevindt, kunnen we de tekst uitlijnen: centreren; eigenschap voor het uitlijnen van de afbeelding in het midden van de div.
De Van element wordt gezegd dat het een inline-element is dat gemakkelijk kan worden gecentreerd door toepassing van de tekst uitlijnen: centreren; eigenschap van CSS naar het bovenliggende element dat het bevat.
gekoppelde lijst java
Opmerking: De afbeelding kan niet worden gecentreerd als de breedte is ingesteld op 100% (volledige breedte).
We kunnen de steno-eigenschap gebruiken marge en stel deze in auto voor het uitlijnen van de afbeelding in het midden, in plaats van de marge-links En marge-rechts eigendom.
Laten we eens kijken hoe u een afbeelding kunt centreren door deze toe te passen tekst uitlijnen: centreren; eigenschap aan het bovenliggende element.
Voorbeeld
In dit voorbeeld lijnen we de afbeeldingen uit met behulp van de tekst uitlijnen: centreren; eigendom. De afbeelding bevindt zich in het div-element.
java-char naar string
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"> Test het nu Uitvoer
tekenreeks in array c
Voorbeeld
Nu gebruiken we de marge-links: auto; marge-rechts: auto; En weergave: blok; eigenschappen voor het uitlijnen van de afbeelding in het midden.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Test het nu Uitvoer
