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

【问题标题】：Centering vertically text in different divs在不同的div中垂直居中文本
【发布时间】：2017-11-13 23:20:49
【问题描述】：

我目前正在使用 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>

【问题讨论】：

标签： html css centering bulma

【解决方案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>

【讨论】：

完成！干杯哥们:)
谢谢！祝你有美好的一天:)

【解决方案2】：

我建议您在 .tile-title 上添加一个 min-height，以便在所有情况下都允许使用两行文本。

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

【讨论】：

但是如果标题是 3 行或更多行呢？
那么您实际要求的是分配给每个仪表板标题的行数是该行中所有仪表板标题所需的最大行数？除非您调用一些 JavaScript，否则我真的看不到这样做的方法。

【解决方案3】：

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

【讨论】：