Question

我想要完成的事情：将div与＃34; col-md-1＆＃34; （投票总数和投票箭头），在父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%;
}

根据我读到的内容，我认为在central-div类中我可以调用top：50％根据父div垂直居中。任何人都知道它为什么不工作？

Answer 1

使用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的垂直居中

1 个答案: