reactjs - 如何在 Semantic UI React 中居中对齐按钮？

Question

如何在 Semantic UI React 中居中对齐按钮
我尝试了几种方法，使用 Grid、Grid Row，但没有成功

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;

Answer 1

如果您能分享您尝试做的事情，那就太好了。

一种解决方案可能是:

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

你可以在这里看到它的工作原理: https://codesandbox.io/s/z2pkv0ro43