Why is my image centered but not aligned? I'm 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>
If you want to center-align the content, you must use the "justifyContent: 'center'" attribute. Also, there are some issues with the "Container" element, you can use .
Check if this is what you want to achieve
Demo on Codesandbox
You can wrap
img
with
BoxView my demo here