焦点李是在页面的中心

Question

我想创建像typeForm的形式。 你可以在这里找到示例https://showroom.typeform.com/to/DYJEHG

我成功实现了设计，但问题是我想要关注页面垂直中心的li。 我尝试了一切，但失败了，没有关于谷歌的教程我们如何做到这一点。 请帮忙。

Answer 1

如果我没有错，你希望表单域位于中心（水平和垂直）并且是整页，对不对？

以下是你可能会寻找一个工作示例：http://codepen.io/anon/pen/ZewEMM

在这种情况下，

要专注于一个输入框每次滚动：
使用这个小插件叫做fullPage.js。这将使您可以专注于每个滚动的一个输入字段。它非常易于使用，请查看！ 这里你的形式与fullpage.js一个例子：即，为便于使用和避免混乱，我没用过<li>

<form method="post" action=""> 

    <div id="fullpage"> 
    <div class="section formfield"> 
     <div> 
     FULL NAME<br/> 
     <input type="text"> 
     </div> 
    </div> 
    <div class="section formfield"> 
     <div> 
     EMAIL<br/> 
     <input type="text"> 
     </div> 
    </div> 
    <div class="section formfield"> 
     <div> 
     MESSAGE<br/> 
     <input type="text"> 
     </div> 
    </div> 
    </div> 

</form> 

通知。通过包装内的表单字段的元素
使用Flexbox的：

还可以很容易地通过JS控制每个场区间的颜色：

$(document).ready(function() { 
    $('#fullpage').fullpage({ 
    sectionsColor: ['#f0f0f0', '#cccccc', '#f0f0f0'], // section colors 
    css3: true, 
    scrollingSpeed: 1000 
    }); 
}); 

要垂直和水平居中表单域DIV。下面是一个示例CSS代码：

.formfield > div { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

让我知道如果这能帮助，并且如果你发现任何在我的回答含糊随意问。