使用Semantic-UI，如何对齐表单字段？

Question

我正在使用Semantic-UI-React构建表单：https://react.semantic-ui.com/collections/form

当前表单的代码和输出可以通过图像在下面看到。我无法弄清楚，如何对齐表单字段？我不希望表单字段占据页面的整个宽度，这就是为什么字段有一个“十宽”的类... ...我如何居中对齐表单字段？

<form class="RaterInviteForm ui form">
   <div class="ui form">
      <div class="fields">
         <div class="ten wide field">
            <label>Email Address</label>
            <div class="field">
               <div class="ui input"><input type="text" name="emails[0]" value="" placeholder="name@example.com"></div>
            </div>
         </div>
      </div>
      <div class="fields">
         <div class="ten wide field">
            <label>Email Address</label>
            <div class="field">
               <div class="ui input"><input type="text" name="emails[1]" value="" placeholder="name@example.com"></div>
            </div>
         </div>
      </div>
      <div class="fields">
         <div class="ten wide field">
            <label>Email Address</label>
            <div class="field">
               <div class="ui input"><input type="text" name="emails[2]" value="" placeholder="name@example.com"></div>
            </div>
         </div>
      </div>
      <div class="field"><a href="true">Add Email</a></div>
   </div>
   <button type="submit" class="ui primary button float-right">Send Invitations</button><button class="ui grey basic button">Skip For Now</button>
</form>

Answer 1

使用<Grid.Row centered>：

<Container>
    <Grid>
        <Grid.Row centered>
            <Grid.Column width={6}>
                <Form>
                    <Form.Field>
                        <Form.Input label="Email Address" placeholder="name@example.com" />
                    </Form.Field>
                    <Form.Field>
                        <Form.Input label="Email Address" placeholder="name@example.com" />
                    </Form.Field>
                    <Form.Field>
                        <Form.Input label="Email Address" placeholder="name@example.com" />
                    </Form.Field>
                </Form>
            </Grid.Column>
        </Grid.Row>
    </Grid>
</Container>