Question

LoginComponent.js

  render() {
    return (
       <div className="col-md-6">
        <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>
        </form>

      </div>
    );
  }

这就是我的LoginComponent（它只是一个登录框组件）的渲染方式，如上。我想居中对齐。

Login.js

const loginStyles = {
  display: 'flex', justifyContent: 'center'
}

class Login extends Component {
  constructor(props) {
    super(props);

  }

  render() {
    return (
      <div>
        <LoginComponent style={loginStyles}/>
      </div>
    );
  }
}

因此，我简单地使用flex和justifiyContent来使该框位于页面的中心，但它始终停留在页面的左上方。我该如何处理这个问题？

Answer 1

除了其他答案，您还需要设置父div组件的宽度以进行水平居中。因此，您可以将父div的宽度设置为`width：“ 100％”'

const loginStyles = {
  display: 'flex', 
  justifyContent: 'center', 
  width: "100%"
}

Answer 2

这是因为如果您不使用该道具，则将style={loginStyles}传递到您的LoginComponent不会做任何事情。

style必须在HTML标签上设置。您可以尝试将整个JSX与另一个div包裹在一起，例如：

render() {
    return (
       <div style={this.props.style}>
        <div className="col-md-6">
          <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&apos;ll never share your email with anyone else.</small>
            </div>
          </form>

        </div>
      </div>
    );
  }

这样，您的LoginComponent实际上将使用其父级传递的style道具。

将React组件居中不起作用

2 个答案: