在不同的 div 中垂直居中文本

Question

我目前正在使用 Bulma CSS 框架来设计我的仪表板页面的一部分，一个功能是 'Widgets' 功能，它具有三个显示关键事实的大容器（例如销售额、新客户等...)。

我遇到的问题是每个 'title' 的长度不同，迫使图形处于不同的高度，理想情况下 'figure' 在所有三个中都处于同一水平DIVS.

如果有办法对齐 CSS 中的数字，那就太好了！预先感谢您的帮助。

样机示例，通过缩短标题实现：

/* Big Figure DIV for Associate Page */
.tile-title{
  margin-bottom:0 !important;
}

.bigFigure{
  margin: 7.5px auto;
}

.bigFigure p{
  text-align: center;
  font-size: 3rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.css" rel="stylesheet">

<div class="tile is-ancestor">
  <div class="tile is-parent">
    <article class="tile is-child notification is-success">
      <p class="tile-title title is-5">New Customers</p>
      <div class="bigFigure">
        <p>4</p>
      </div>
      <small>You've captured 4 new customers in the last 7 days!</small>
    </article>
  </div>
  <div class="tile is-parent">
    <article class="tile is-child notification is-warning">
      <p class="tile-title title is-5">New Orders</p>
      <div class="bigFigure">
        <p>0</p>
      </div>
      <small>There haven't been any orders in the last 7 days.</small>
    </article>
  </div>
  <div class="tile is-parent">
    <article class="tile is-child notification is-danger">
      <p class="tile-title title is-5">Orders that delayed for shipping</p>
      <div class="bigFigure">
        <p>5</p>
      </div>
      <small>There are 5 order(s) that require shipping.</small>
    </article>
  </div>
</div>

Answer 1

我建议您在 .tile-title 上设置一个 min-height，在所有情况下都允许两行文本。

.tile-title {
  margin-bottom:0 !important;
  min-height: 2.5em;
}

Answer 2

一种可能的解决方案是使用 js。您可以为所有容器设置 margin-top 值最高的容器的 margin-top 值。只需遍历所有容器和 select 具有最高 margin-top 值的容器。然后为其余容器设置此值。

Answer 3

要以某种方式独立于标题行号，您可以position: absolute;您的编号和<small>元素并将它们从底部对齐，例如：

.bigFigure {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
}

根据您的需要调整 bottom 值。 50% 最多可处理 3 行。

如果您的页脚行号是固定的，您甚至可以采用固定数字而不是百分比。

article.tile {
  padding-bottom: 8em;
}

.tile-title {
  margin-bottom: 0 !important;
}

.bigFigure {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
}

.bigFigure p {
  text-align: center;
  font-size: 3rem;
}

.tile>small {
  position: absolute;
  bottom: 1em;
  padding-right: 1em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.css" rel="stylesheet">

<div class="tile is-ancestor">
  <div class="tile is-parent">
    <article class="tile is-child notification is-success">
      <p class="tile-title title is-5">New Customers</p>
      <div class="bigFigure">
        <p>4</p>
      </div>
      <small>You've captured 4 new customers in the last 7 days!</small>
    </article>
  </div>
  <div class="tile is-parent">
    <article class="tile is-child notification is-warning">
      <p class="tile-title title is-5">New Orders, that are so cool, that I need 3 lines.</p>
      <div class="bigFigure">
        <p>0</p>
      </div>
      <small>There haven't been any orders in the last 7 days.</small>
    </article>
  </div>
  <div class="tile is-parent">
    <article class="tile is-child notification is-danger">
      <p class="tile-title title is-5">Orders that delayed for shipping</p>
      <div class="bigFigure">
        <p>5</p>
      </div>
      <small>There are 5 order(s) that require shipping.</small>
    </article>
  </div>
</div>

在不同的 div 中垂直居中文本

Centering vertically text in different divs

html

css

centering

bulma