My Goal: Ensuring that the divs with "col-md-1" (the vote total and vote arrows) are vertically aligned in the center of the parent div
HTML Structure:
<div class="row container-fluid">
<div class="col-md-1 centered-div">
<p id='vote-total-{{question.pk}}'>vote total: {{question.votes}}</p>
</div>
<div class="col-md-1 centered-div">
<p class='question-votes'>
<a id='question-upvote-{{question.pk}}' href="{% url 'questions:upvote' pk=question.pk %}">
<span class="glyphicon glyphicon-arrow-up"></span>
</a>
</p>
<p class='question-votes'>
<a id='question-downvote-{{question.pk}}' href="{% url 'questions:downvote' pk=question.pk %}">
<span class="glyphicon glyphicon-arrow-down"></span>
</a>
</p>
</div>
<div class="col-md-4">
<h2>
title: {{question.title}}
</h2>
<h3>
details: {{question.details}}
</h3>
<p>asked by: <a href="{% url 'accounts:detail' pk=question.user.id %}">{{question.user.username}}</a>, on: {{question.created_at}}</p>
<p>
{% if user.is_authenticated and question.user.username == request.user.username and not hide_delete %}
<a href="{% url 'questions:delete' pk=question.pk %}" title="delete" class="btn btn-simple">
<span class="glyphicon glyphicon-remove text-danger"></span>
<span class="text-danger icon-label">Delete</span>
</a>
{% endif %}
</p>
</div>
</div>
CSS Styling:
.container-fluid {
height: 100%;
padding-left: 0px;
padding-right: 0px;
}
.centered-div {
position: absolute;
top: 50%;
}
Issue Encountered: Despite attempting to use 'top: 50%' in the centered-div class to vertically center it within the parent div, the desired outcome is not achieved. Any insights on why this might be happening?