Как горизонтально централизовать форму семантической-ui-реакции

Question

Я работаю над интерфейсом проекта, используяузел pacakage. Я новичок в использовании этого, и у меня возникают проблемы с горизонтальной централизацией формы. Ниже приводится способ отображения формы.

render(){ 
    const accessCodeLb='Access Code' 
    const passwordLb='Password' 
    const {accessCodeError,passwordError}=this.state 
    return(
    <div> 
    <Header as='h2' icon textAlign='center'> 
     <Icon name='write' circular/> 
     <Header.Content> 
     {signUpLb} 
     </Header.Content> 
    </Header> 
    <Grid stackable page columns={16}> 
     <Grid.Column width={2}></Grid.Column> 
     <Grid.Column width={12}> 
     <Form size='small' key='small'> 
      <Form.Group> 
      <Form.Field width={4} control={Input} name='accessCode' error={accessCodeError} 
      placeholder={accessCodeLb} onChange={this.onChange}/> 
      </Form.Group> 
      <Form.Group> 
      <Form.Field width={4} control={Input} name='password' error={passwordError} 
      type='password' placeholder={passwordLb} onChange={this.onChange}/> 
     </Form.Group> 
     <Form.Group> 
      <Button primary type='submit' onClick={this.onSubmit}>Login</Button> 
     </Form.Group> 
     </Form> 
    </Grid.Column> 
    <Grid.Column width={2}></Grid.Column> 
    </Grid> 
</div> 
) 
} 

Answer 1

я, наконец, сделал это, как показано ниже:

render(){ 
    const accessCodeLb='Access Code' 
    const passwordLb='Password' 
    const {accessCodeError,passwordError}=this.state 
    return(
    <div> 
     <Header as='h2' icon textAlign='center'> 
     <Icon name='write' circular/> 
     <Header.Content> 
      {signUpLb} 
     </Header.Content> 
    </Header> 
    <Grid columns={16}> 
     <Grid.Column width={6}></Grid.Column> 
     <Grid.Column width={4}> 
      <Form size='small' key='small'> 
      <Form.Group> 
       <Form.Field width={16} control={Input} name='accessCode' error={accessCodeError} placeholder={accessCodeLb} onChange={this.onChange}/> 
      </Form.Group> 
      <Form.Group> 
       <Form.Field width={16} control={Input} name='password' error={passwordError} type='password' placeholder={passwordLb} onChange={this.onChange}/> 
      </Form.Group> 
      <Form.Group> 
       <Form.Field as={Button} width={8}/> 
       <Form.Field as={Button} width={8}primary type='submit' onClick={this.onSubmit}>Login</Form.Field> 
      </Form.Group> 
      </Form> 
     </Grid.Column> 
     <Grid.Column width={6}></Grid.Column> 
    </Grid> 
    </div> 
    ) 
    }