如何水平集中語義 - 用戶反應表格

Question

我正在使用semantic-ui-react節點插件工作在前端項目上。我對使用這個新手很陌生，而且我有問題需要水平集中表單。以下是我如何渲染表單。

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