CSSとブートストラップを使用してdivを垂直に整列させますか？

Question

データベースに格納されている10個の質問で簡単なアンケートを作成しようとしていますが、10個の質問がページに動的に追加されています。基本的には、一度に1つの質問だけがページに表示されるようにしたいと思いますが、他の質問を表示するにはスクロール可能なページが必要です。

たとえば、質問1がページの中央に表示され、ユーザーが回答を入力して次にクリックし、ページが次の質問にスクロールします。ユーザーが上にスクロールすると、ページを上にスクロールし、下にスクロールします。次の質問に飛びつくために、私はidとそれぞれの質問にただそのidへのリンクを持っている次のボタンを持つことを計画していました。

<div class="container"> 
    <div class="row wrapper"> 
     <div class="question"> 
      <p>What is your name?</p> 
     </div> 

     <div class="description"> 
      <p>Used for...</p> 
     </div> 

     <div class="answer"> 
      <input type="text" placeholder=""> 
     </div> 
    </div> 
</div> 

このような上記のルックスのための私のCSS：ページ上の質問を取り込むための

私のHTMLは次のようになり

.question { 
    color: #232A33; 
    text-align: left; 
    font-size: 2em; 
} 

.description { 
    color: #FFCD3D; 
    text-align: left; 
    font-size: 1.25em; 
} 

.answer { 
    color: #232A33; 
    text-align: left; 
    font-size: 1.25em; 
} 

私は質問がページの中央に得ることができました次のコードを使用してください：

.wrapper { 
    width: 500px; 
    height: 150px; 

    position: absolute; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 

    margin: auto; 
} 

これは1つの質問に対してうまくいきますが、複数の質問は、絶対的な位置なので互いに重なり合っています。

ページのデザインをどのように達成できるかについてのヒントを教えてください。

ありがとうございます！

Answer 1

あなたはとても近くです。これは、ちょっとしたCSSを追加することで（行クラスをわずかに調整して）行うことができます。

次を追加する場合：

.row { 
    width: 100%; 
    margin: 15% auto; 
    height: 100vh!important; 
} 

をして**relative**位置にあなたのラッパーを調整し、あなたが

.wrapper { 
    width: 500px; 
    height: auto; 
    position: relative; 
} 

参照スニペットやfiddle

.question { 
 
    color: #232A33; 
 
    text-align: left; 
 
    font-size: 2em; 
 
} 
 

 
.description { 
 
    color: #FFCD3D; 
 
    text-align: left; 
 
    font-size: 1.25em; 
 
} 
 

 
.answer { 
 
    color: #232A33; 
 
    text-align: left; 
 
    font-size: 1.25em; 
 
} 
 

 
.row { 
 
    width: 100%; 
 
    margin: 15% auto; 
 
    height: 100vh!important; 
 
} 
 

 
.wrapper { 
 
    width: 500px; 
 
    height: auto; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row wrapper"> 
 
    <div class="question"> 
 
     <p>What is your name?</p> 
 
    </div> 
 

 
    <div class="description"> 
 
     <p>Used for...</p> 
 
    </div> 
 

 
    <div class="answer"> 
 
     <input type="text" placeholder=""> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="row wrapper"> 
 
    <div class="question"> 
 
     <p>What is your name?</p> 
 
    </div> 
 

 
    <div class="description"> 
 
     <p>Used for...</p> 
 
    </div> 
 

 
    <div class="answer"> 
 
     <input type="text" placeholder=""> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="row wrapper"> 
 
    <div class="question"> 
 
     <p>What is your name?</p> 
 
    </div> 
 

 
    <div class="description"> 
 
     <p>Used for...</p> 
 
    </div> 
 

 
    <div class="answer"> 
 
     <input type="text" placeholder=""> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="row wrapper"> 
 
    <div class="question"> 
 
     <p>What is your name?</p> 
 
    </div> 
 

 
    <div class="description"> 
 
     <p>Used for...</p> 
 
    </div> 
 

 
    <div class="answer"> 
 
     <input type="text" placeholder=""> 
 
    </div> 
 
    </div> 
 
</div>

良い結果が表示されるはずです