html/css複数のスパンを垂直に整列する

Question

<div class="row history"> 
    <div class="col col-50 histroy1"> 
     <span class="my-orders">Numbers</span> 
     <span class="my-orders-numbers">13</span> 
    </div> 
    <div class="col col-50 histroy2"> 
     <span class="orders-status">In Progress<span>0</span></span> 
     <hr /> 
     <span class="orders-status">Completed<span>13</span></span> 
    </div> 
</div> 

.my-orders{ 
    font-size: 14px; 
    display: block; 
} 
.my-orders-numbers{ 
    font-size: 37px; 
    color: #F04C3A; 
    display: block; 
} 

私は、両方のスパンをhistory1内に垂直に整列したいので、my-ordersスパンとmy-orders-numbersがhistory1の途中に来るようにします。div（my-orders first、my -orders-numbers、しかし一緒に中間に位置する）。これはどうすればいいですか？

EDIT：不明な点はご了承ください。私は下の画像を添付しました。

Iは、

---

と一緒に「完了」中央に垂直に番号と13の両方を位置合わせしたいとも&「進行中」垂直に整列します。

Answer 1

あなたは多くの情報を与えていないが、私が正しくあなたを理解すれば、これはあなたが探しているものでしょうか？

.histroy1{ 
 
\t text-align: center; 
 
} 
 
.my-orders{ 
 
    font-size: 14px; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.my-orders-numbers{ 
 
    font-size: 37px; 
 
    color: #F04C3A; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div class="row history"> 
 
    <div class="col col-50 histroy1"> 
 
     <span class="my-orders">Numbers</span> 
 
     <span class="my-orders-numbers">13</span> 
 
    </div> 
 
    <div class="col col-50 histroy2"> 
 
     <span class="orders-status">In Progress<span>0</span></span> 
 
     <hr /> 
 
     <span class="orders-status">Completed<span>13</span></span> 
 
    </div> 
 
</div>

Answer 2

あなたは、両方の要素に以下のCSSを追加する必要があります。

display: inline-block; 
vertical-align: middle; 

http://codepen.io/kevinfarrugia/pen/WRGaLP