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

Question

我目前正在使用 Bulma CSS 框架来设计我的仪表板页面的一部分，其中一个功能是“小部件”功能，它具有三个显示关键事实（例如销售数量、新客户等）的大容器。

我遇到的问题是每个“标题”的长度不同，迫使图形处于不同的高度，理想情况下，“图形”在所有三个 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

为了以某种方式独立于标题行号，您可以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>

Answer 2

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

Answer 3

我建议您min-height在.tile-title所有情况下都允许使用两行文本。

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