Why is my image aligned center, but not justified? im confused..
<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>
2
Answers
If you want to justify content centred, you have to use "justifyContent: ‘center’" property. Also the "Container" element was having some issues, you can use .
Check if this what you want to achieve
Demo on Codesandbox
You can wrap
img
withBox
Look at my demo here