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>