Pourquoi mon image est-elle alignée au centre mais pas aux extrémités ? Je suis tellement confus..
<Box
sx={{
display: 'flex',
minHeight: '100vh',
alignItems: 'center',
flexGrow: 1,
}}>
<Container maxWidth="sm">
<img src="https://static.vecteezy.com/system/resources/previews/001/200/294/original/house-png.png"
width={200}
alt="img"
/>
<LinearProgress sx={{ mt: 4 }} />
</Container>
</Box> 
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Si vous souhaitez centrer le contenu, vous devez utiliser l'attribut "justifyContent: 'center'". De plus, il y a quelques problèmes avec l'élément "Conteneur", vous pouvez utiliser .
Vérifiez si c'est ce que vous voulez réaliser
<Box sx={{ display: "flex", minHeight: "100vh", alignItems: "center", justifyContent: "center", flexGrow: 1 }} > <Box> <img src="https://static.vecteezy.com/system/resources/previews/001/200/294/original/house-png.png" width={200} alt="img" /> <LinearProgress sx={{ mt: 4 }} /> </Box> </Box>Démo sur Codesandbox
Vous pouvez utiliser
Box包裹img<Box sx={{ display: 'flex', minHeight: '100vh', alignItems: "center", flexGrow: 1, }} > <Container maxWidth="sm"> <Box sx={{ display: 'flex', justifyContent: "center" }} > <img src="https://static.vecteezy.com/system/resources/previews/001/200/294/original/house-png.png" width={200} alt="img" /> </Box> <LinearProgress sx={{ mt: 4 }} /> </Container> </Box>Voir ma démo ici