Question

我正在尝试创建多个视口大小的部分，我需要在部分的中心和中间对齐测试。我尝试给display: table-cell，垂直对齐文本，然后这些部分彼此相邻。

我创建了FIDDLE

html：

   <div id="main">
        <section id="home">
            gf
        </section>
        <section id="about">
            gh
        </section>
        <section id="contactMe">
            gf
        </section>
  </div>

的CSS：

#main{
    vertical-align: middle;
    width:100%;
    text-align: center;
}
#home{
    background-color: green;
    background-size: cover;
    height:100vh;
    width: 100vw;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#about{
    background-color: blue;
    background-size: cover;
    height:100vh;
    width: 10vw;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#contactMe{
    background-color: red;
    background-size: cover;
    height:100vh;
    width: 100vw;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

感谢任何帮助。

如果需要更多信息，请在评论中提及。感谢。

编辑：章节应该低于彼此

Answer 1

这是一种让它发挥作用的快捷方法。将文字换成div，然后将display: table应用于section元素，然后display: table-cell应用于div。

＆＃13;

#main{
    vertical-align: middle;
    width:100%;
    text-align: center;
}
#main section {
    background-size: cover;
    height:100vh;
    width: 100vw;
    display: table;
}
#main section div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#home{
    background-color: green;
}
#about{
    background-color: blue;
}
#contactMe{
    background-color: red;
}

＆＃13;

<div id="main">
  <section id="home">
    <div>gf</div>
  </section>
  <section id="about">
    <div>gh</div>
  </section>
  <section id="contactMe">
    <div>gf</div>
  </section>
</div>

＆＃13;

使部分相互低于一致

1 个答案: