Question

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

我遇到的问题是每个标题都是＆＃39;是一个不同的长度，迫使数字在不同的高度，理想情况下的数字＆＃39;在所有三个DIVS中都处于同一水平。

如果有一种方法可以将CSS中的数字对齐，那就太棒了！提前感谢您的帮助。

通过缩短标题实现的示例模型：

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

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

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

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

Answer 3

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

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

3 个答案: