imalfect
imalfect2y ago

Grid elements are not centered

Hello, my grid elements aren't centered, why is that so?
return (
<Container
sx={{mt: 2, mb: 2}}>
<Grid
justifyContent="center"
alignItems="center"
container
spacing={2}
columns={{xs: 1, sm: 1.5, md: 3, lg: 5.5, xl: 6.5}}
sx={{width: 1}}>
<Grid item xs={1} md={1.5} align="center">
<InfoBox title="Block Count" value="1231212"/>
</Grid>
<Grid item xs={1} md={1.5} lg={2} align="center">
<InfoBox title="Header Count" value="123231121"/>
</Grid>
<Grid item xs={1} align="center">
<InfoBox title="Peers" value="123"/>
</Grid>
<Grid item xs={1} md={2} align="center">
<InfoBox title="DAA Score" value="1237867112"/>
</Grid>
</Grid>
</Container>
);
return (
<Container
sx={{mt: 2, mb: 2}}>
<Grid
justifyContent="center"
alignItems="center"
container
spacing={2}
columns={{xs: 1, sm: 1.5, md: 3, lg: 5.5, xl: 6.5}}
sx={{width: 1}}>
<Grid item xs={1} md={1.5} align="center">
<InfoBox title="Block Count" value="1231212"/>
</Grid>
<Grid item xs={1} md={1.5} lg={2} align="center">
<InfoBox title="Header Count" value="123231121"/>
</Grid>
<Grid item xs={1} align="center">
<InfoBox title="Peers" value="123"/>
</Grid>
<Grid item xs={1} md={2} align="center">
<InfoBox title="DAA Score" value="1237867112"/>
</Grid>
</Grid>
</Container>
);
InfoBox:
return (
<Box
sx={{
'display': 'flex',
'backgroundColor': 'background.paper',
'boxShadow': 3,
'overflow': 'hidden',
'height': 120,
'borderRadius': 1.5,
'&:hover': {
backgroundColor: 'background.paper',
opacity: [0.9, 0.87, 0.86],
},
}}
>
<Typography align="left" variant="h5"
sx={{
marginLeft: 2, marginTop: 1, marginRight: 1.3,
flexGrow: 1,
fontSize: 27, fontWeight: 700, fontColor: 'white'}}>
{props.title}
</Typography>
<Typography align="right" variant="h3" color='#007aff'
sx={{
marginTop: 1, marginRight: 1.3,
flexGrow: 1,
fontWeight: 600, fontSize: 33}}>
{props.value}
</Typography>
</Box>
);
return (
<Box
sx={{
'display': 'flex',
'backgroundColor': 'background.paper',
'boxShadow': 3,
'overflow': 'hidden',
'height': 120,
'borderRadius': 1.5,
'&:hover': {
backgroundColor: 'background.paper',
opacity: [0.9, 0.87, 0.86],
},
}}
>
<Typography align="left" variant="h5"
sx={{
marginLeft: 2, marginTop: 1, marginRight: 1.3,
flexGrow: 1,
fontSize: 27, fontWeight: 700, fontColor: 'white'}}>
{props.title}
</Typography>
<Typography align="right" variant="h3" color='#007aff'
sx={{
marginTop: 1, marginRight: 1.3,
flexGrow: 1,
fontWeight: 600, fontSize: 33}}>
{props.value}
</Typography>
</Box>
);
Thanks for the help.
0 Replies
No replies yetBe the first to reply to this messageJoin