如何在反应中对齐按钮、文本字段和中心文本？

Question

how to align the button, textfield and text in the center in react?

    <div className="row text-center">
      <div className="text-center col-12">
        <div className="form-group text-center col-4">
          <div style={{ fontSize: "18px" }} className="field-label mb-2">
            Apply Now
          </div>
          <input
            style={{ height: "38px" }}
            className="col-12 mb-2"
            type="email"
            name="email"
            placeholder="email"
            value={email}
            onChange={e => onEmailChange(e)}
          />
          {validator.message("email", email, "required|alpha")}
          <button
            className="btn-solid btn col-12"
            style={{ height: "45px" }}
            type="button"
            disabled={isEmailLoading}
            onClick={e => onClickApply(e)}>
            {isEmailLoading ? (
              <CircularProgress color="inherit" size={20} className="" />
            ) : (
              "Apply"
            )}
          </button>
        </div>
      </div>
    </div>

Answer 1

As i can see you're using class col-4 for your entire form. If your grid system is 12-cols (I guess it is!) your columns will be placed from left! Unless you assign offset to them(to ignore some col). If you want to put your col in center, you have to use offset! in this situation you need to pass 4 cols to center your items! If you're using bootstrap you can use offset-4 easily!

More detail about offset in grid systems like bootstrap: Offset Classes in Bootstrap

Your div class example:

className="form-group text-center col-4 offset-4"