ReactJS - CSS Flexbox:我设置了一个flexbox来对齐我的元素,但我的页面无法垂直居中

问题描述 投票:0回答:2

我已经设置了一个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&nbsp;</p>
            <div prefetch href="/">
              <a>/Home</a>
            </div>

            <br />

            <p>Go to&nbsp;</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; 
}

任何提示都会很棒,谢谢

css reactjs flexbox
2个回答
1
投票

要垂直对齐内容,您需要在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;      
}

codesandbox


0
投票
.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

© www.soinside.com 2019 - 2024. All rights reserved.