css - ReactJS - CSS Flexbox:我设置了一个 flexbox 来对齐我的元素,但我的页面无法垂直居中
问题描述
我设置了一个 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;
}
推荐阅读
- keras - Keras 影评情感分类器:GlobalAveragePooling1D 层的作用是什么?
- html - 如何仅将背景颜色添加到主要元素而不是:之前和:之后
- python - Python 和 PowerPoint 将 ' ' 替换
为 '_x000D_' - c# - 您可以将 Elasticsearch“q”查询字符串参数解析为 NEST 对象吗?
- firebase - Firebase 存储组件不存在
- java - 未使用 Comparator 对文件进行排序的 Java 列表
- php - 在模板中嵌入控制器
- apache-spark - 使用 Spark 将句子编码为序列模型
- wordpress - 如何将 wordpress 与 SCM 进行良好的集成?
- r - R 计数组计数,如果缺少 n NA 则删除