Wie kann ich eine Schaltfläche in Semantic UI React
zentrieren? Ich habe verschiedene Ansätze mit Grid, Grid Row ausprobiert, aber keinen Erfolg

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;
9
Arash 19 Jän. 2019 im 11:04

3 Antworten

Beste Antwort

Wäre schön, wenn Sie uns mitteilen könnten, was Sie versucht haben.

Eine Lösung könnte sein:

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

Sie können es hier sehen: https://codesandbox.io/s/z2pkv0ro43

7
grenzbotin 19 Jän. 2019 im 09:04

Dieser hat für mich funktioniert, ohne Grid zu verwenden

<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 21 Juli 2019 im 11:21

Ich fand, dass der folgende Code eine sauberere Lösung ist, bei der kein Raster aus der semantischen Benutzeroberfläche hinzugefügt werden muss. Das einzige war, dass ich den Button in meinem Registrierungs- / Anmeldeformular verwendet habe. Funktioniert möglicherweise nicht für alle.

Was ich getan habe, war a hinzuzufügen

Klassenname: 'signUpBtn'

Und dann habe ich in meiner CSS-Datei die hinzugefügt

Anzeige: flex ;

Inhalt rechtfertigen: Mitte;

JSX:

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

CSS:

.signUpBtn {
   display: flex;
   justify-content: center;
}
1
Roger Perez 1 Feb. 2019 im 19:11