為什麼我的圖像居中對齊，但不兩端對齊？我很困惑..
<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> 
如果您想讓內容居中對齊，則必須使用「justifyContent: 'center'」屬性。另外，「Container」元素存在一些問題，您可以使用 。
檢查這是否是您想要實現的目標
<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>Codesandbox 上的示範
您可以用
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>在此處查看我的演示