css MUI:对齐和调整Flex框内的图像中心

6gpjuf90  于 2023-06-25  发布在  其他
关注(0)|答案(2)|浏览(151)

为什么我的图像居中对齐,但不对齐?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>

piwo6bdm

piwo6bdm1#

如果你想以内容为中心进行调整,你必须使用“justifyContent:“中心”属性。另外,“容器”元素也有一些问题,您可以使用。
检查这是否是您想要实现的目标

<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>

Demo on Codesandbox

y0u0uwnf

y0u0uwnf2#

您可以使用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>

看看我的演示here

相关问题