CSS hjælper os med at kontrollere visningen af billeder i webapplikationer. Centrering af billeder eller tekster er en almindelig opgave i CSS. For at centrere et billede skal vi indstille værdien af margin-venstre og margin-højre til auto og gør det til et blokelement ved at bruge display: blok; ejendom.
Hvis billedet er i div-elementet, så kan vi bruge tekst-align: center; egenskab til at justere billedet til center i div.
Det element siges at være et inline element, der nemt kan centreres ved at anvende tekst-align: center; egenskaben for CSS til det overordnede element, der indeholder det.
Bemærk: Billedet kan ikke centreres, hvis bredden er indstillet til 100 % (fuld bredde).
Vi kan bruge stenografi-egenskaben margen og sæt den til auto for at justere billedet i midten i stedet for at bruge margin-venstre og margin-højre ejendom.
Lad os se, hvordan man centrerer et billede ved at anvende tekst-align: center; ejendom til dets overordnede element.
python __dict__
Eksempel
I dette eksempel justerer vi billederne ved at bruge tekst-align: center; ejendom. Billedet er i div-elementet.
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 det nu Produktion
Eksempel
Nu bruger vi margin-venstre: auto; margin-right: auto; og display: blok; egenskaber til at justere billedet til midten.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Test det nu Produktion
