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