我已经设置了一个flexbox来对齐我的元素,但我的页面无法垂直居中。我无法弄清楚为什么因为我的页面甚至还有一个容器,所以我也确保了视口的单位。所以在这里我的沙箱:https://codesandbox.io/s/rlk3j68pmq。
这里是我的reactjs片段:
class App extends Component {
state = {
name: "",
message: "",
messageStock: []
}
render() {
return (
<div className={style.page}>
<div className={style.page_container}>
<div className={style.form_container}>
<form onSubmit={this.emitMessage} >
<input
name="message"
type="text"
placeholder="message"
value={this.state.message}
onChange={this.handleChange}
/>
<input type="submit" value="Send" />
</form>
</div>
<div
className={style.link}
>
<p>Go to </p>
<div prefetch href="/">
<a>/Home</a>
</div>
<br />
<p>Go to </p>
<div prefetch href="/letchat">
<a>/Letchat</a>
</div>
</div>
</div>
</div>
)
}
}
这里我的css片段:
.page{
width: 100vw;
height: 100%;
min-height: 100vh;
background: rgb(219, 101, 255);
}
.page_container{
padding: 5vh 3vw;
}
.page .form_container{
height: 100%;
width: 100%;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.page form{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.page form input[type="text"]{
height: 10vh;
width: 30vw;
}
.message_box{
background: white;
height: 40vh;
width: 70vw;
margin:auto;
border:solid greenyellow;
margin-bottom: 5vh;
overflow: scroll;
}
.message_item{
margin: 2vh 0;
}
.link{
display:inline-block;
}
任何提示都会很棒,谢谢
要垂直对齐内容,您需要在styles.module.css中添加最后几行:
.page {
width: 100vw;
height: 100%;
min-height: 100vh;
background: rgb(219, 101, 255);
/* Added the following */
display: flex;
flex-direction: column;
align-items: center;
}
.page{
width: 100vw;
height: 100%;
min-height: 100vh;
background: rgb(219, 101, 255);
/*add following to center align content vertically */
display:flex;
align-items: center;/*vertically align page_container*/
justify-content:center/*horizontally align page_container*/
}
.page_container{
padding: 5vh 3vw;
/* add following to center align content of page_container horizontally*/
text-align:center
}
将以上规则添加到styles.modules.css文件中。
Codesandbox链接:https://codesandbox.io/s/olrvozl2z5?codemirror=1&fontsize=14