垂直居中一个div内的div

问题描述：

我想要完成的事情：拥有带“col-md-1”（投票总数和投票箭头）的div，在父div的中心垂直对齐垂直居中一个div内的div

我的HTML的

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

.container-fluid { 
    height: 100%; 
    padding-left: 0px; 
    padding-right: 0px; 
} 
.centered-div { 
    position: absolute; 
    top: 50%; 
}

根据我阅读，我认为在中心-DIV级我能顶拨打：50％垂直居中它基于在p arent div。任何人都知道它为什么不起作用？

更好的连锁行业的你所需要垂直对齐文本更具体的一些细节上的背景颜色在其他文本是没有意义的 –

答

使用Flexbox的垂直对齐，因此修复在所有屏幕

.centered-div { 
    position: absolute; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
flex-direction:row;/*change to column if not as in expected direction.*/ 
height:80px; /*Set height if not specified earlier*/ 
}

垂直居中一个div内的div

相关推荐