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，然后是 my-orders-numbers，但一起放在中間）。 我該怎么做呢？

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

我想將 Numbers 和 13 垂直對齊到中間，並且還想垂直對齊“進行中”和“已完成”以及

---

.

Answer 1

您需要將以下 CSS 添加到兩個元素中：

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

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

Answer 2

你沒有提供太多信息，但如果我理解正確，這就是你要找的嗎？

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

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