Material UI - 將圖標與排版文本居中對齊

Question

如何將圖標對齊到與文本相同的水平。 截至目前，我看到圖標位於文本的頂部。 我嘗試使用padding-top: 5px和margin-top: 5px但這似乎沒有按預期工作。

  <Box>
    <Typography variant="h2">
      Photography <FaCamera />
    </Typography>
  </Box>

我使用Stackblitz創建了一個工作示例。 有人可以幫忙嗎？

Answer 1

我能夠使用 CSS 的position和top屬性正確對齊它。

<Box>
  <Typography variant="h2">
    Photography <FaCamera style={{position: 'relative', top: '8px'}} />
  </Typography>
</Box>

Answer 2

您可以輕松地使用 Grid 來實現正確的對齊，而無需任何 CSS。

<Grid container alignItems="center" spacing={2}>
   <Grid item>
      <Typography variant="h2">
         Photography
      </Typography>
   </Grid>
   <Grid item>
      <FaCamera />
   </Grid>
</Grid>

Answer 3

只需在您的內聯圖標上執行fontSize="inherit" ，例如： <FaCamera fontSize="inherit" />

Answer 4

<Typography variant="h2">
  Photography <FaCamera  style={{verticalAlign:"middle"}}/>
</Typography>

您可以嘗試內聯樣式“verticalAlign”，它對我有用。

Answer 5

從@mui/icons-material導入圖標時，我遇到了同樣的問題。

設置fontSize: 'inherit'使圖標與字體大小相同。 仍然存在輕微的垂直 alignment 問題，我可以通過使用verticalAlign: 'text-top'來解決。

對我有用的代碼是：

<Icon sx={{ fontSize: 'inherit', verticalAlign: 'text-top' }} />