html - bootstrap col中的div如何垂直居中

问题描述

我想创建一个带有文本中心的方形框。以下是我的愿望：

我正在使用 Django 和 Bootstrap。为了做我的广场，我按照这里的说明进行操作：http: //www.mademyday.de/css-height-equals-width-with-pure-css.html

然后，这是我的 HTML 代码：

  <div class="container-fluid d-flex h-100 flex-column">
        <div class='row flex-fill'>
          <div class='colonne_salle col-sm-2'>
            <div class='row'>
                {% for s in salle %}
                <div class='col-sm-6 square'>
                  <div class="bloc-salle" id="{{ s.name }}">
                      <h3 class='nom-salle'>{{ s.name }}</h3>
                  </div>
                </div>
                {% endfor %}
            </div>
          </div>

我的CSS：

.bloc-salle{
  /* margin : 15px 0 15px 0; */
  position:  absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.square:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

目前，我得到了这个结果：

如果你能帮助我，非常感谢！

编辑：在我找到的关于方形网格的答案中，没有一个描述如何将每个方形内的内容垂直居中。

标签： htmlcssdjangobootstrap-4

html - bootstrap col中的div如何垂直居中

问题描述

解决方案

推荐阅读