I couldn't figure out how to center buttons in Material-UI. This is the code I have:
function BigCard(props) { const { classes } = props; return ( <div> <Card className={classes.card}> <CardContent> <Typography variant="display1" className={classes.title}> Start Funding! </Typography> </CardContent> <CardActions > <Button size="small" color="primary" className={classes.actions}> Share </Button> <Button size="small" color="primary"> Learn More </Button> </CardActions> </Card> </div> );
How can I center my button?
To center a button in React Material UI, we can put the button in a Grid component. And we set the justify prop of the Grid to 'center' and we set the container prop to true . to add the Grid prop with the container and justify props. We set justify to 'center' to center the items inside.
Answer: Use the text-center Class You can simply use the built-in class . text-center on the wrapper element to center align buttons or other inline elements in Bootstrap.
You can use Box
element
<Box textAlign='center'> <Button variant='contained'> My button </Button> </Box>
you could use the override with classes in the material ui doc,
FIRST WAY
You can do something like :
//Add your justify css in your styles const const styles = { ... root: { justifyContent: 'center' } };
And use the classes props to add this to your CardActions component :
<CardActions classes={{root: classes.root}}>
SECOND WAY (easier)
OR You can use the style directly on your component, but i advise you to train how to use classes if you're working alot with material-ui
Just do something like :
<CardActions style={{justifyContent: 'center'}}>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With