MUI: Align and adjust image center in flexbox-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

MUI: Align and adjust image center in flexbox

P粉550323338 2023-09-08 18:20:02

321

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>

P粉550323338

reply all(2)

P粉5485126372023-09-09 12:34:07 2 floor

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