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

我想垂直對齊歷史1中的兩個跨度，以便my-orders span和my-orders-numbers進入history1 div的中間（my-order first，then my - 數字，但一起定位在中間）。我該怎麼做呢？

編輯：抱歉，不清楚的解釋。下面附上了圖片。

我想垂直數字和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