web-dev-qa-db-ja.com

Material UIで水平アイコンとテキストを揃える方法

私はマテリアルUIの初心者ですが、アイコンとテキストが揃っていません。

not align

私の望ましい結果：

私のコードは：

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

2日かかりました。グリッドとローを試しましたが、うまくいきませんでした。誰か助けてもらえますか？

htmlcssmaterial-ui
21
tong

グリッドを使用する必要があります。そのようなものがうまくいくはずです：

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

スタイル

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>

display1をdisplay3または別の タイポグラフィバリアント に置き換えて、3か所すべてでテキストサイズを選択できます。 &nbsp;は、テキストが折り返されたときに単語間で途切れないことを保証します。

私にとっては、これをレンダリングして this like をdisplay3と他のいくつかのスタイルの色に追加してレンダリングできます。

1
nxtman123
    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 primary="Updated 1 hour ago" />
   </ListItem>

【デモ画像】

0
Sabareesh

Material UIの Flexboxコンポーネント を使用することもできます。

例えば：

// ...
import { Box } from '@material-ui/core';
// ...

<Box alignItems="center" display="flex">
 <Box>
    <LinkIcon className={classes.linkIcon}  />
 </Box>
 <Box>
    revolve
 </Box>
</Box>

alignItems: center属性は、内側のアイテムを垂直方向に揃えます。

これにより、追加のマークアップが追加されます。ただし、コンポーネントのAPIを見ると、さらに多くの柔軟性があります。たとえば、 マージンまたはパディングを使用 するメソッドなど、Material UIの残りの実装と一貫しています。また、ユースケースが発生した場合に、項目を異なるように配置することは本当に簡単です。

0
Remi