ページの中心にあるフォーカスli

Question

私はtypeFormのようなフォームを作成しようとしています。 ここに例を見つけることができます

私は正常にデザインを実装しましたが、問題は垂直方向の中心に来ることです。 私はすべてを試みましたが失敗しました。Googleでこれを行う方法についてのチュートリアルはありません。 助けてください。

Answer 1

私が間違っていない場合は、フォームフィールドを中央（水平および垂直）にして、フルページにする必要がありますか？スクロールごとに1つの入力フィールドに集中するような場合にはhttp://codepen.io/anon/pen/ZewEMM

、

：
使用fullPage.jsと呼ばれるこの小さなプラグイン

は、ここにあなたが探しているかもしれないものの作業例です。これにより、スクロールごとに1つの入力フィールドに焦点を当てることができます。それは本当に使いやすい、それをチェック！ここで 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> 

注意してください。

またJSを介して容易に各フィールド・セクションの色を制御することができる：

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

を縦横フォームフィールドを中心へ：
使用フレキシボックスを内部フォームフィールド要素を包むことによってdiv。

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

これが役に立ったら教えてください。また、私の答えで曖昧なものが見つかった場合はお気軽にお問い合わせください。