使用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="[email protected]"></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="[email protected]"></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="[email protected]"></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="[email protected]" />
                    </Form.Field>
                    <Form.Field>
                        <Form.Input label="Email Address" placeholder="[email protected]" />
                    </Form.Field>
                    <Form.Field>
                        <Form.Input label="Email Address" placeholder="[email protected]" />
                    </Form.Field>
                </Form>
            </Grid.Column>
        </Grid.Row>
    </Grid>
</Container>