使用 Semantic-UI，如何居中对齐表单字段？答案

【问题标题】：With Semantic-UI, how to center align form fields?使用 Semantic-UI，如何居中对齐表单字段？
【发布时间】：2019-04-18 03:27:05
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： semantic-ui semantic-ui-react

【解决方案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>

【讨论】：