Zange
Ich bin ein Neuling in der Material-Benutzeroberfläche, jetzt sind mein Symbol und mein Text nicht ausgerichtet:
Meine gewünschten Ergebnisse:
Mein Code ist:
<div style={{
display: 'inline-flex',
VerticalAlign: 'text-bottom',
BoxSizing: 'inherit',
textAlign: 'center',
AlignItems: 'center'
}}>
<LinkIcon className={classes.linkIcon} />
revolve
</div>
Ich habe Raster und Reihe ausprobiert, aber es hat nicht funktioniert. Kann mir jemand helfen?
Peter Moses
Das funktioniert perfekt!
<div style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
}}>
<LinkIcon />
<span>revolve</span>
</div>
Ich habe den Stil verwendet, ihn aber auf einen einzigen angewendet Typography also brauchte ich das nicht p Element. Wirkt wunderbar mit v4.0.2.
– hsimah
5. Juni 2019 um 23:42 Uhr
Tinmarfrutos
Sie müssen Grid verwenden. So etwas sollte funktionieren:
<Grid container direction="row" alignItems="center">
<Grid item>
<LinkIcon className={classes.linkIcon} />
</Grid>
<Grid item>
revolve
</Grid>
</Grid>
Perfekt, wenn der Text standardmäßig länger als die Zeile wird, beginnt das Raster umzubrechen, was bedeutet, dass der Text unter dem Symbol liegt. Um dies zu verhindern, können Sie hinzufügen wrap="nowrap"
– Shikyo
10. Mai 2019 um 8:48
👍🏾 Fühlt sich eher nach der „MUI“-Methode an, bei der die Komponenten verwendet werden. Übrigens, direction="row" sollte nicht benötigt werden. Ich bin mir ziemlich sicher, dass es die Standardeinstellung ist.
– CodeFinity
8. Mai 2022 um 20:38 Uhr
Dies kann leicht erreicht werden MUI v5 durch die Verwendung von a Stack und eingestellt alignItems prop zu 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>
Probieren Sie den folgenden Code aus. Sie können verwenden variant Wie von Ihnen erbeten.
const useStyles = makeStyles(theme => ({
wrapIcon: {
verticalAlign: 'middle',
display: 'inline-flex'
}
}));
<Typography variant="subtitle1" className={classes.wrapIcon}>
<LinkIcon className={classes.linkIcon} /> revolve
</Typography>
alternative einfache Lösung
<Grid container direction="row" alignItems="center">
<SearchIcon /> example
</Grid>
Ich bin verwirrt, warum das funktioniert Material-Benutzeroberfläche Beispiele haben immer eine <Grid item direkt unter einem <Grid containeraber hier hast du nur verwendet <Grid container. Mein Fall ist, wenn ich hinzufüge <Grid container><Grid item>Die alignItems="center" Funktioniert nicht, das Symbol ist immer noch nicht vertikal ausgerichtet, aber mit dieser Lösung funktioniert es endlich. Finde ich auch <Grid container item funktionieren auch. Da in der Material-Benutzeroberfläche erwähnt wird, dass untergeordnete Elemente von Containern Elemente sind, halte ich es für kanonisch, beides zu haben container Und item.
– Shawn
20. April 2022 um 19:01 Uhr
Ich denke, das ist der Grund, warum sie Stack in V5 eingeführt haben
– ThomasP1988
21. April 2022 um 8:28
Stile
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 Text
</Typography>
könntest du ersetzen display1 mit display3 oder ein anderes Typografie-Variante an allen 3 Stellen, um Ihre Textgröße auszuwählen. Der stellt sicher, dass Ihr Text beim Umbruch nicht zwischen Wörtern unterbrochen wird.
Für mich kann das so aussehen
mit display3 und ein paar andere Stile wurden für die Farbe hinzugefügt.
Ich bin verwirrt, warum das funktioniert Material-Benutzeroberfläche Beispiele haben immer eine <Grid item direkt unter einem <Grid containeraber hier hast du nur verwendet <Grid container. Mein Fall ist, wenn ich hinzufüge <Grid container><Grid item>Die alignItems="center" Funktioniert nicht, das Symbol ist immer noch nicht vertikal ausgerichtet, aber mit dieser Lösung funktioniert es endlich. Finde ich auch <Grid container item funktionieren auch. Da in der Material-Benutzeroberfläche erwähnt wird, dass untergeordnete Elemente von Containern Elemente sind, halte ich es für kanonisch, beides zu haben container Und item.
– Shawn
20. April 2022 um 19:01 Uhr
Ich denke, das ist der Grund, warum sie Stack in V5 eingeführt haben
– ThomasP1988
21. April 2022 um 8:28
Christos Lytras
Haben ListItemIcon Und ListItemText eingewickelt in a ListItem hält es in einer Zeile und verhindert ein Brechen:
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>
Demobild:
Können Sie der Antwort bitte etwas mehr Kontext hinzufügen?
– Rigin Oommen
16. Okt. 2019 um 9:32 Uhr
Bitte platzieren Sie einfach einen Link zu dem Bild, das Sie anhängen wollten, und erklären Sie, warum ListItem löst das Problem.
– CPHPython
16. Okt. 2019 um 10:21 Uhr
@Sabareesh, ich sehe, du bist ganz neu bei Stack Overflow, also willkommen in der Community. Bei der Beantwortung von Fragen ist es hilfreich zu erklären, warum Ihre Antwort funktioniert. Ich bin nicht sicher, wie das AccessAlarmIcon ist auf magische Weise vertikal ausgerichtet. Erklären Sie daher bitte, warum dies funktioniert.
– PatS
1. November 2019 um 20:00 Uhr
