異なるdivの垂直方向のテキストを中央に配置

Question

私は現在、Bulma CSSフレームワークを使用してダッシュボードページの一部をスタイルしています.3つの大きなコンテナを持つ「ウィジェット」機能があります（例えば、新しい顧客など...）。

私は問題は、それぞれのタイトルが異なる長さで、異なる高さになるように強制していることです。理想的には、 'figure'は3つのDIVSすべてで同じレベルになります。

素晴らしいことだろうCSS内の数字を整列する方法がある場合は

！ ご協力いただきありがとうございます。あなたはすべてのケースでは2行のテキストを可能にし、あなたの.tile-titleにmin-heightを持って、私はお勧め

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

何とか独立した見出し行番号からであるためには、あなたが例えば、あなたの番号と<small>要素をposition: absolute;、下からそれらを揃えることができます。：

.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

：

例のモックアップは、タイトルを短縮することによって達成します。

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

Answer 3

可能な解決策の1つがjsを使用しています。コンテナのすべてのコンテナのマージン・トップ値を、マージン・トップ値を上限として設定することができます。すべてのコンテナを繰り返して、最も高いマージンの値を持つコンテナを選択してください。そして残りのconteinersのためにこの値を設定してください。