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