Question

如何在语义UI React中居中对齐按钮
我尝试了几种方法，使用网格，网格行，但是没有成功

Foo

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

Answer 2

我发现下面的代码是一种更干净的解决方案，不需要从语义UI中添加 Grid 。唯一的事情是我使用了我的注册/注册表格中的按钮。可能并不适合所有人。

我所做的就是添加

className：'signUpBtn'

然后在我的css文件中添加

display：flex ;

justify-content：center;

JSX：

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

CSS：

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

Answer 3

这个对我有用，无需使用网格

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

Answer 4

这是我拥有的最简单的解决方案：

按钮内图标的上一个代码（未居中对齐）：

<Button>
    <Icon name="plus"/>
</Button>

更新代码（图标居中）：

<Button>
    <div>
        <Icon name="plus"/>
    </div>
</Button>

如何在语义UI React中居中对齐按钮？

4 个答案: