7
votes

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

comment puis-je centrer un bouton dans l'interface utilisateur sémantique 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;

reactjs semantic-ui

0 commentaires

3 Réponses :

8
votes

Ce serait bien si vous pouviez partager ce que vous avez essayé de faire.

Une solution pourrait être:

<Segment>
  <Label ribbon color="blue" size="large">Support</Label>
  <Grid>
    <Grid.Column textAlign="center">
      <Button>contact us</Button>
    </Grid.Column>
  </Grid>
</Segment>

Vous pouvez le voir fonctionner ici: https://codesandbox.io/s/z2pkv0ro43

1 commentaires

N'existe-t-il pas une solution plus simple qui ne nécessite pas d'ajouter une grille?

1
votes

J'ai trouvé que le code ci-dessous était une solution plus propre qui ne nécessite pas d'ajouter Grid à partir de 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.

Ce que j'ai fait, c'est ajouter un

className: 'signUpBtn'

puis dans mon fichier css j'ai ajouté le

affichage: flex ;

justify-content: centre;

JSX:

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

CSS:

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

0 commentaires

2
votes

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>

0 commentaires