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

Je veux aligner verticalement les deux travées à l'intérieur de history1, de sorte que mes-commandes span et mes-orders-numbers viennent au milieu de history1 div (mes-commandes d'abord, puis mes-orders-numbers, mais se positionnant au milieu ensemble). Comment puis-je faire cela?

EDIT: désolé pour l'explication peu claire. J'ai joint l'image ci-dessous. entrez la description de l'image ici

Je veux aligner verticalement les nombres et 13 au milieu et je veux également aligner verticalement `` En cours '' et `` Terminé '' avec


-1
smchae 16 janv. 2017 à 16:53

2 réponses

Meilleure réponse

Vous ne donnez pas beaucoup d'informations mais si je vous comprends bien, est-ce ce que vous recherchez?

.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>
0
Tim Barnett 16 janv. 2017 à 13:59

Vous devez ajouter le CSS suivant aux deux éléments:

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

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

0
Kevin Farrugia 16 janv. 2017 à 13:58