Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to center align button in Semantic UI React?

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;
like image 233
Arash Avatar asked Jan 19 '19 08:01

Arash


2 Answers

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

like image 182
grenzbotin Avatar answered Nov 16 '22 13:11

grenzbotin


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>
like image 4
goldenrati0 Avatar answered Nov 16 '22 14:11

goldenrati0