- Hur man centrerar en bild i Div horisontellt?
- Marginal egendom
- Flexbox modul
- Layout för rutnätsvy
- Positionsattribut
Hur man centrerar en bild i Div horisontellt?
Utvecklaren kan använda marginalegenskapen, Flexbox-modulen, Grid View-layouten och Position-attributet för att centrera en bild i div:en horisontellt. Följ guiden nedan för att centrera bilden horisontellt i div-taggen.
Låt oss anta att det finns en div där bilden placeras på detta sätt i HTML-filen:
< div klass = 'rot' >
< img src = '../bok.jpg' höjd = 'femtio%' bredd = 'femtio%' klass = 'bild' >
< / div >
Bilden får en bredd och höjd på 50 % och en klass av 'bild'.
Använda Margin Property
Användare kan lägga till utrymme runt HTML-elementen med egenskapen margin. Den tilldelar en marginal enligt det tillgängliga utrymmet efter att storleken på fönsterskärmen har ändrats. Ställer till exempel marginal-vänster och höger till auto, och visningsegenskapen är inställd på att blockera:
img {
display: block;
marginal-vänster: auto;
margin-right: auto;
}
Efter att ha utfört exemplet ovan ser webbsidan ut så här:
Ovanstående utdata har visat att bilden nu är i mitten.
Använder Flexbox-modulen
den ' flexbox ” är en modul som innehåller en komplett uppsättning egenskaper. I vårt fall, välj rotelementklassen och använd flex som ett värde för visningsegenskapen. Ställ in mitten som ett värde för ' motivera-innehåll ' och ' align-objekt ' egenskaper:
.rot {display: flex;
rättfärdiga- innehåll : Centrum;
align-items: center;
bakgrund- Färg : blå;
}
Webbsidan ser ut så här efter att ha kört koden:
Ovanstående utdata visar att bilden visas i mitten av div med en bakgrundsfärg inställd på 'blå'.
Använda Grid View Layout Module
Rutnätsvyns layout har 12 kolumner, och den totala bredden är inställd på 100 % och den placerar varje element på en specifik position på webbsidan:
.rot {display: rutnät;
platsobjekt: center;
}
I kodavsnittet ovan tilldelas 'grid'-värdet visningsegenskapen. Medan 'place-item' används som en förkortning för egenskaperna 'justify-content' och 'align-items':
Utdata autentiserar att bilden är i mitten av div med hjälp av rutnätsmetoden:
Använda positionsattribut
Genom att sätta rotklassens position till relativt värde och bildklassen till absolut värde. Bilden kan visas i mitten av div:en:
.rot {position: relativ;
}
.bild {
bredd : 700px;
höjd : 500px;
position: absolut;
vänster: femtio %;
transformera: translateX ( - femtio % ) ;
}
Bilden flyttas till vänster om '50%' och transformeras sedan tillbaka till '-50%' vid X-axeln. Den visar bilden i mitten av div horisontellt:
Det är så bilden kan centreras i div horisontellt.
Slutsats
För att ställa in bilden horisontellt i ett div-element, använd ' marginal ”, “ flexmodul ”, “ rutnätslayout ' och ' placera ' egenskaper. den ' marginal ” egenskapen för vänster och höger är inställd på auto. 'flexmodulen' och 'rutnätslayout' ställer in displayen på flex respektive rutnät och använder ' placera föremål “ egenskap för att centrera bilden. Positionsegenskapen ställer in värdet relativt rotklassen och absolut till bildklassen och använder egenskaperna 'left' och 'transform'. Den här bloggen har framgångsrikt visat hur man centrerar bilder i en div horisontellt.