使部分低于彼此

我想创建多个部分的大小的视口，我需要对齐测试中心和部分中间。我尝试给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; 
}

任何帮助表示赞赏。

如果需要在评论中提及任何信息。谢谢。

编辑：部分应该低于海誓山盟

来源

2015-01-15 A.J

这是使其工作的一种快速方法。将文本包装成div，然后将display: table应用于section元素，然后将display: table-cell应用于div。

#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; 
 
}

<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>

来源

2015-01-15 11:48:00

Thankx很多。完美的作品。只是要知道，这必须是实现这个ryt的推荐方式。 –

这种方法得到了现代浏览器的很好的支持。可能还有其他的方式使用绝对定位和内联块来做到这一点，但我怀疑你仍然需要一个嵌套的元素方法。您需要一个外部元素来检测视口尺寸，并在其内部有一个用于处理垂直对齐的子元素。 –

明白了。感谢您的解答和解释。 –

使部分低于彼此

回答

相关问题