如何在材料UI中对齐水平图标和文本

Question

我是材料ui的新手，现在我的图标和文本未对齐：

我想要的结果：

我的代码是：

<div style={{
    display: 'inline-flex',
    VerticalAlign: 'text-bottom',
    BoxSizing: 'inherit',
    textAlign: 'center',
    AlignItems: 'center'
}}>
    <LinkIcon className={classes.linkIcon}  />
    revolve
</div>  

它花了我两天时间，我什至尝试了网格和行，但是没有用。谁能帮我？

Answer 1

这可以在MUI v5中通过使用 aStack并将alignItems属性设置为轻松实现center：

import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import AddCircleIcon from '@mui/icons-material/AddCircle';

<Stack direction="row" alignItems="center" gap={1}>
  <AddCircleIcon />
  <Typography variant="body1">text</Typography>
</Stack>

Answer 2

替代简单解决方案

<Grid container direction="row" alignItems="center">
     <SearchIcon /> example
</Grid>

Answer 3

您需要使用网格。这样的事情应该起作用：

<Grid container direction="row" alignItems="center">
  <Grid item>
    <LinkIcon className={classes.linkIcon}  />
  </Grid>
  <Grid item>
    revolve
  </Grid>
</Grid>

Answer 4

这应该给出预期的结果。

<div style={{
    display: 'flex',
    alignItems: 'center'
}}>
    <LinkIcon />
    <p>revolve</p>
</div>  

Answer 5

样式

const styles = theme => ({
    icon: {
        position: "relative",
        top: theme.spacing.unit,
        width: theme.typography.display1.fontSize,
        height: theme.typography.display1.fontSize
    }
});

JSX

<Typography variant="display1">
    <Icon className={this.props.classes.icon}/>Your&nbsp;Text
</Typography>

您可以在所有 3 个位置替换display1为display3或其他排版变体以选择您的文字大小。在 确保您的文字不单词之间时，包装破裂。

对我来说，这可以渲染成这样

有display3和其他几个款式增加了色彩。

Answer 6

试试下面的代码。您可以variant根据需要使用。

const useStyles = makeStyles(theme => ({
  wrapIcon: {
    verticalAlign: 'middle',
    display: 'inline-flex'
   }
}));

<Typography variant="subtitle1" className={classes.wrapIcon}>
    <LinkIcon className={classes.linkIcon}  /> revolve
</Typography>

Answer 7

将ListItemIcon和ListItemText包裹在 a 内ListItem将使它保持在一行并防止中断：

import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
    
<ListItem >
  <ListItemIcon><AccessAlarmIcon color="secondary" /></ListItemIcon>
  <ListItemText>Updated 1 hour ago</ListItemText>
</ListItem>

演示图片：