CODEWITHSUNDEEP
reactjssemantic-ui
Arash
Arash

Reputation: 3741

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;

Upvotes: 9

Views: 18329

Answers (4)

Anupam
Anupam

Reputation: 538

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>

Upvotes: 0

goldenrati0
goldenrati0

Reputation: 332

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>

Upvotes: 4

Roger Perez
Roger Perez

Reputation: 3129

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;
}

Upvotes: 1

grenzbotin
grenzbotin

Reputation: 2565

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

Upvotes: 12

Related Questions