How to center align button in Semantic UI React?

reactjs semantic-ui
Arash picture Arash · Jan 19, 2019 · Viewed 9.2k times · Source

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;

Answer

grenzbotin picture grenzbotin · Jan 19, 2019

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

Related questions

Form Validation with Semantic-UI-React

I am using the official Semantic UI React components to create a web application. I have a form on my sign up page, which contains an email field, a password field, and a confirm password field. import {Component} from 'react'; …

Read More
Semantic UI (React): How to use Link components in Menu.List elements

I'm trying to get a semantic ui (react) menu list, which should be working with react router, which means I would like to use the Link component of react router If I use this... <Menu.Item name='profile'> &…

Read More
semantic ui react Setting dropdown value to state

how to have dropdowns selected value in state.here is my code iam getting value for name field but dropdown not working, can anyone find out what i am missing? MyComponent.js import React,{Component} from 'react'; class MyComponent extends …

Read More