Vertically aligning div using CSS and Bootstrap? - html

Question

I am trying to build a simple survey with 10 questions which are stored in my database, looped through and the 10 questions are added to the page dynamically. Basically, I would like there to only be one question on the page at a time, but the page to be scrollable to see the other questions.
For example, question 1 would show up in the middle of the page, the user types their answer and clicks next, and the page scrolls to the next question. If the user scrolls up, it scrolls through the page up, and down scrolls down. For jumping to the next question I was planning on just having each question with an id and the next button just having a link to that id.
My HTML for populating the questions on the page looks like this:
<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>
My CSS for the above looks like this:
.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;
}
I managed to get the question centered on the page using the following code:
.wrapper {
width: 500px;
height: 150px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
This works fine for one question, but if there are multiple questions they all overlap each other because the position is absolute.
Any tips on how I can achieve this design for the page?
Thanks in advance!

Answer 1

You're very close. This can be done by adding just a tad more css in (adjusting the row class slightly).
If you add the following:
.row {
width: 100%;
margin: 15% auto;
height: 100vh!important;
}
and adjust your wrapper to **relative** positioning, you should see a good result
.wrapper {
width: 500px;
height: auto;
position: relative;
}
See snippet or 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>