使用 Semantic-UI，如何居中对齐表单域？

Question

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

当前表单的代码和输出可以通过图像在下面看到。我不知道，如何居中对齐表单字段？我不希望表单域占据页面的整个宽度，这就是为什么这些域有 class 的 "ten wide"... 我如何居中对齐表单域？

<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>

使用 Semantic-UI，如何居中对齐表单域？

With Semantic-UI, how to center align form fields?

semantic-ui

semantic-ui-react