How to center a button in material ui?

0
votes

Given below is the code which I coded using material ui.I'm still new to that area.I need to center my button.But it comes to the corner.Is there any problem in my code?

                <Button className={clsx(classes.button)} 
                type="submit"
                alignItems="center"
                variant="contained">
                 {'Sign Up'}
                </Button>
                </div>```



button:{
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    borderRadius: 8,
    border: 0,
    color: 'white',
    height: 48,
    width: "30%",
    padding: '10px 30px',
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    justifyContent: 'center'
  }

alignItems="center" does not work for me.
1
material-ui
The align-items property sets the align-self value on all direct children. In other words, if you have a flexbox container around your button, this is where the property needs to be applied. This is not MUI-specific behavior. Btw, you can remove clsx if you only apply one class. - hotpink

1 Answers

0
votes

paper: {

textAlign: 'center',
color: theme.palette.text.secondary,

},

I enabled textAlign: 'center' and It fixed