how can I center align a button in Semantic UI React
I have tried several approaches, using Grid, Grid Row, but no success
import {Segment, Button,Label,Sticky,Grid,Container} from 'semantic-ui-react';
import React, {Component} from 'react';
const GeneralSupportSegment =() => (
<Segment>
<Label ribbon color="blue" size="large">Support</Label>
<Button>contact us</Button>
</Segment>
);
export default GeneralSupportSegment;
Would be nice if you could share what you tried to do.
One solution might be:
<Segment>
<Label ribbon color="blue" size="large">Support</Label>
<Grid>
<Grid.Column textAlign="center">
<Button>contact us</Button>
</Grid.Column>
</Grid>
</Segment>
You can see it working here: https://codesandbox.io/s/z2pkv0ro43
This one worked for me, without using Grid
<Segment>
<Label ribbon color="blue" size="large">Support</Label>
<Segment basic textAlign={"center"}>
<Button style={{textAlign: "center"}}>contact us</Button>
</Segment>
</Segment>
I found the code below to be a cleaner solution that doesn't require to add Grid from semantic-ui. The only thing was that I used the button within my register/sign up form. May not work for everyone.
What I did was add a
className: 'signUpBtn'
and then within my css file I added the
display:flex;
justify-content:center;
JSX:
<Form.Field className="signUpBtn" color="blue" control={Button}> Register </Form.Field>
CSS:
.signUpBtn {
display: flex;
justify-content: center;
}
Here is the simplest solution I have:
Previous code of icon inside a button(not aligned in the centre):
<Button>
<Icon name="plus"/>
</Button>
Updated code(icon aligned at center):
<Button>
<div>
<Icon name="plus"/>
</div>
</Button>
