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 span和my-orders-numbers位于history1 div的中间（my-orders first，然后是my-orders-numbers，但定位在中间） ）。我该怎么做？

编辑：对不清楚的解释感到抱歉。我在下面附上了图片。

我想垂直对齐数字和13对齐中间，并且还希望垂直对齐＆＃39;进行中＆＃39; ＆安培; ＆＃39;完成＆＃39;以及

---

。

Answer 1

您需要将以下CSS添加到两个元素中：

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

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

Answer 2

你没有提供太多信息，但如果我理解你的话，这就是你要找的吗？

＆＃13;

＆＃13;

.histroy1{
	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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;