反应引导元素不居中答案

【问题标题】：react bootsrap element not centering反应引导元素不居中
【发布时间】：2020-04-17 18:44:16
【问题描述】：

我有一个水平居中的“div”，然后更新为使用 react bootstrap “ 形式”。

现在“表单”上的元素没有居中，出现在左边...

render() {
    return (
        <div className="App">
            <div className="App-title">
                Countdown to {this.state.deadline}
            </div>
            <Clock
                deadline={this.state.deadline}
            />
            <Form inline>
                <FormControl 
                    className="Deadline-input"
                    placeholder='new date' 
                    onChange={event => this.setState({newDeadline: event.target.value})}
                />
                <Button onClick={() => this.changeDeadline()}>
                    Submit
                </Button>
            </Form>

        </div>
    )
}

所有都在className App下

.App {
text-align: center;
font-size: 35px;
margin-top: 20%;
}

.App-title {
font-size: 50px;
}

.Clock-days,
.Clock-hours,
.Clock-minutes,
.Clock-seconds {
display: inline;
margin: 10px;
}

.Deadline-input {
font-size: 25px;
margin: 5px;
}

为什么它不再居中？如何使我的表格居中对齐？ :]

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

当你import 'bootstrap/dist/css/bootstrap.min.css';bootstrap默认给元素添加了一些样式和类，因为这种形式，所以向左折叠。

您可以将justify-content-center 类添加到<Form inline />

<Form inline className="justify-content-center">

像这样：

render() {
    return (
        <div className="App">
            <div className="App-title">
                Countdown to {this.state.deadline}
            </div>
            <Clock
                deadline={this.state.deadline}
            />
            // add justify-content-center class to the <Form />
            <Form inline className="justify-content-center">
                <FormControl 
                    className="Deadline-input"
                    placeholder='new date' 
                    onChange={event => this.setState({newDeadline: event.target.value})}
                />
                <Button onClick={() => this.changeDeadline()}>
                    Submit
                </Button>
            </Form>

        </div>
    )
}

【讨论】：