[英]How to align horizontal icon and text in MUI
I am a newbie in MUI, now my icon and text are not aligned:我是 MUI 的新手,现在我的图标和文字没有对齐:
My desired results:我想要的结果:
My code is:我的代码是:
<div style={{
display: 'inline-flex',
VerticalAlign: 'text-bottom',
BoxSizing: 'inherit',
textAlign: 'center',
AlignItems: 'center'
}}>
<LinkIcon className={classes.linkIcon} />
revolve
</div>
I tried grid and row, but not work.我尝试了网格和行,但没有用。 Can anyone help me?
谁能帮我?
This works perfectly!这工作得很好!
<div style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
}}>
<LinkIcon />
<span>revolve</span>
</div>
You need to use Grid.您需要使用网格。 Something like that should works:
这样的事情应该有效:
<Grid container direction="row" alignItems="center">
<Grid item>
<LinkIcon className={classes.linkIcon} />
</Grid>
<Grid item>
revolve
</Grid>
</Grid>
Try the below code.试试下面的代码。 You can use
variant
as per your requirement.您可以根据需要使用
variant
。
const useStyles = makeStyles(theme => ({
wrapIcon: {
verticalAlign: 'middle',
display: 'inline-flex'
}
}));
<Typography variant="subtitle1" className={classes.wrapIcon}>
<LinkIcon className={classes.linkIcon} /> revolve
</Typography>
alternative simple solution替代简单解决方案
<Grid container direction="row" alignItems="center">
<SearchIcon /> example
</Grid>
styles样式
const styles = theme => ({
icon: {
position: "relative",
top: theme.spacing.unit,
width: theme.typography.display1.fontSize,
height: theme.typography.display1.fontSize
}
});
JSX JSX
<Typography variant="display1">
<Icon className={this.props.classes.icon}/>Your Text
</Typography>
you could replace display1
with display3
or another typography variant in all 3 places to choose your text size.您可以在所有 3 个位置用
display3
或其他排版变体替换display1
以选择您的文本大小。 The
ensures that your text doesn't break between words when it wraps.确保您的文本在换行时不会在单词之间中断。
For me this can render to look like this对我来说,这可以渲染成这样
with display3
and a few other styles added for color.使用
display3
和一些其他样式添加颜色。
Having ListItemIcon
and ListItemText
wrapped inside a ListItem
will keep it in one line and prevent breaking:将
ListItemIcon
和ListItemText
包裹在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>
Demo image:演示图片:
You can also use Material UI's Flexbox component .您还可以使用 Material UI 的Flexbox 组件。
For example:例如:
// ...
import { Box } from '@material-ui/core';
// ...
<Box alignItems="center" display="flex">
<Box>
<LinkIcon className={classes.linkIcon} />
</Box>
<Box>
revolve
</Box>
</Box>
The alignItems: center
attribute will vertically align the inner items. alignItems: center
属性将垂直对齐内部项目。
This will add some additional markup.这将添加一些额外的标记。 However, if you look at the component's API there's a lot of additional flexibility.
但是,如果您查看组件的 API,就会发现有很多额外的灵活性。 Such as for example a method to use margin or padding that's consistent with the rest of your Material UI implementation.
例如,使用与 Material UI 实现的其余部分一致的边距或填充的方法。 Also it's really easy to align the items differently if the use-case should occur.
此外,如果出现用例,以不同方式对齐项目也很容易。
Same problem here, this is what I did.同样的问题,这就是我所做的。
import LinkIcon from '@material-ui/icons/Link';
import styled from 'styled-components';
...
const Resolve = styled.div`
display: flex;
vertical-align: middle,
`;
<Resolve>
<LinkIcon style={{ marginRight: '5px' }} />
<p>resolve</p>
</Resolve>
If you aren't happy with mUI default link icon you can always DIY:如果您对 mUI 默认链接图标不满意,您可以随时 DIY:
{/* this is the same chained icon used in the own material-ui,
idk why this ins't avaiable yet */}
function CustomLinkIcon(props) {
return (
<SvgIcon {...props}>
<path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" />
</SvgIcon>
);
}
...
<Resolve>
<CustomLinkIcon
{/* adjust margin top if needed */}
style={{ marginRight: '3px', marginTop: '3px' }} {
/>
<p>resolve</p>
</Resolve>
the best option is to use it like that :最好的选择是这样使用它:
import {Box, Typography} from '@material-ui/core'
import LinkIcon from '@material-ui/icons/LinkIcon';
........
<Box display='flex' alignItems='center'>
<LinkIcon className={classes.linkIcon} />
<Typography variant='h5'>
resolve
</Typography>
</Box>
This can be easily achieved in MUI v5 by using a Stack
and set alignItems
prop to center
:这可以通过使用
Stack
并将alignItems
道具设置为center
在MUI v5 中轻松实现:
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>
With this solution the icon will inherit your typography, it prevents having to re-write the style when changin使用此解决方案,图标将继承您的排版,从而避免在更改时重新编写样式
<Typography component={Stack} direction="row" alignItems="center" color="secondary">
<EditIcon fontSize="inherit" sx={{ marginRight: 1 }} />
Edit
</Typography>
If you are trying to vertical align text and icon within MUI's Typography without using variant
, you can simply add a display setting to Typography as follows:如果您尝试在不使用
variant
的情况下在 MUI 的 Typography 中垂直对齐文本和图标,您可以简单地向 Typography 添加显示设置,如下所示:
<Typography display="flex">
Welcome!
<Icon />
</Typography>
This is what worked for me.这对我有用。
We can use Typography to make align horizontal spacing with icon我们可以使用 Typography 使水平间距与图标对齐
const styles = theme => ({
icon: {
fontSize: '1rem',
position: 'relative',
right: theme.spacing(0.5),
top: theme.spacing(0.5),
},
});
<Typography><CheckCircleIcon className={className={this.props.classes.icon}}/>Home</Typography>
I have seen all the solutions.我已经看到了所有的解决方案。 But here is the simplest I believe:-):
但这是我认为最简单的:-)
<Typography><LinkIcon sx={{verticalAlign:"middle"}}/> RESOLVE</Topography>
It also works with inline image when you want the image align with the text.当您希望图像与文本对齐时,它也适用于内联图像。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.