web-dev-qa-db-fra.com

Comment centrer le bouton d'alignement dans Semantic UI React?

comment centrer un bouton dans Semantic UI React
J'ai essayé plusieurs approches, en utilisant Grid, Grid Row, mais sans succès

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;
reactjssemantic-ui
7
Arash

Celui-ci a fonctionné pour moi, sans utiliser Grid

<Segment>
    <Label ribbon color="blue" size="large">Support</Label>
    <Segment basic textAlign={"center"}>
        <Button style={{textAlign: "center"}}>contact us</Button>
    </Segment>
</Segment>
2
tahmid.choyon

J'ai trouvé que le code ci-dessous est une solution plus propre qui ne nécessite pas d'ajouter Grid from semantic-ui. La seule chose est que j'ai utilisé le bouton dans mon formulaire d'inscription/d'inscription. Peut ne pas fonctionner pour tout le monde.

J'ai ajouté un

className: 'signUpBtn'

puis dans mon fichier css j'ai ajouté le

affichage: flex;

justifier-contenu: centre;

JSX:

<Form.Field className="signUpBtn" color="blue" control={Button}> Register </Form.Field>

CSS:

.signUpBtn {
   display: flex;
   justify-content: center;
}
1
Roger Perez