使用CSS和Bootstrap垂直對齊div？

Question

我想用10個問題構建一個簡單的調查問卷，這些問題存儲在我的數據庫中，通過循環訪問並將10個問題動態添加到頁面中。基本上，我希望一次只在頁面上有一個問題，但該頁面可以滾動以查看其他問題。

例如，問題1將顯示在頁面中間，用戶鍵入他們的答案，然後點擊下一個，頁面滾動到下一個問題。如果用戶向上滾動，則向上滾動頁面，向下滾動頁面。爲了跳到下一個問題，我打算每個問題都有一個ID，下一個按鈕只有一個鏈接到該ID。

我來填充頁面上的問題，HTML看起來像這樣：

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

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

這工作正常的一個問題，但如果有因爲這個位置是絕對的，所以它們都有重疊的問題。

關於如何實現頁面設計的任何提示？

在此先感謝！

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>