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