Question

我在React中使用引导程序。

下面是我的渲染功能，我正在尝试使表单居中对齐。

render() {
    return (
        <div class="row">
            <div className="col-md-3 center">
                <form>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input value={this.state.email} onChange={this.handleChange} type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
                        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Password</label>
                        <input value={this.state.password} onChange={this.handleChange} type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
                    </div>
                    <button type="submit" onClick={this.login} class="btn btn-primary">Login</button>
                    <button onClick={this.signup} style={{ marginLeft: '25px' }} className="btn btn-success">Signup</button>
                </form>
            </div>
        </div>


    );
}

center的样式如下：

.center {
    display: flex;
    justify-content: 'center';
    align-items: 'center';
}

但是，结果如下。它在左上角说。我认为这是这样做的方法。

编辑

form {
    background: #55acf3;
    padding: 1.5em;
    border-radius: 1em;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.error-message {
    margin-top: 1em;
    color: red;
}

Answer 1

更改CSS并添加height

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height:100vh;  
}

https://jsfiddle.net/132y89rc/

Answer 2

首先，渲染JSX时，请始终使用className而不是class。然后添加margin: 0 auto进行水平对齐，并添加height: 100vh和align-self: center进行垂直对齐。这应该起作用。

样式：

.d-flex {
  display: flex!important;
  height: 100vh;
}

.center {
  margin: 0 auto;
  align-self: center;
}

组件：

render() {
        return (
          <div className={`row ${styles['d-flex']}`}>
            <div className={`col-md-3 ${styles.center}`}>
              <form>
                <div className="form-group">
                  <label htmlFor="exampleInputEmail1">Email address</label>
                  <input value={this.state.email} onChange={this.handleChange} type="email" name="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
                  <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>
                <div className="form-group">
                  <label htmlFor="exampleInputPassword1">Password</label>
                  <input value={this.state.password} onChange={this.handleChange} type="password" name="password" className="form-control" id="exampleInputPassword1" placeholder="Password" />
                </div>
                <button type="submit" onClick={this.login} className="btn btn-primary">Login</button>
                <button onClick={this.signup} style={{ marginLeft: '25px' }} className="btn btn-success">Signup</button>
              </form>
            </div>
          </div>
        );
      }

React中的居中对齐组件（垂直和水平）

2 个答案: