Comment aligner une flèche CSS au centre vertical de ma cellule de tableau?

Question

J'ai une flèche CSS et du texte dans une cellule de table ...

<td><div class="arrow-up"></div> + 1492.46</td> 

Comment puis-je obtenir la flèche d'alignement sur la gauche du texte et aussi dans le centre vertical de la cellule? J'ai essayé le style ci-dessous sur la flèche ...

.arrow-up { 
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent; 
    border-right: 8px solid transparent; 
    border-bottom: 8px solid black; 
    vertical-align: middle; 
} 

mais la flèche aligne toujours au-dessus du texte - https://jsfiddle.net/s8e5k3st/. Toutes les suggestions pour obtenir le bon alignement sont appréciées.

Answer 1

Il suffit d'ajouter display:inline-block; à arrow-up classe.

.arrow-up { 
    display:inline-block; /* <-- this */ 
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent; 
    border-right: 8px solid transparent; 
    border-bottom: 8px solid black; 
    vertical-align: middle; 
} 

Edited JSFiddle

Answer 2

veux juste vous donner une solution de rechange, utilisez polices Impressionnant

<i class="fa fa-caret-up fa-lg" aria-hidden="true"></i>

#currencyTable { 
 
    display: inline; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    background-color: #ffffff; 
 
    border: 1px solid #C7CDD1; 
 
} 
 

 
.currency-row img, 
 
.currency-row .name { 
 
    vertical-align: middle; 
 
} 
 

 
.currency-row { 
 
    min-height: 30px; 
 
    border-bottom: 1px solid #C7CDD1; 
 
} 
 

 
.currency-row img, 
 
.currency-row .name { 
 
    vertical-align: middle; 
 
} 
 

 
.currency-row td { 
 
    padding: 12px 0 12px 0; 
 
} 
 

 
.currency-row td:first-child { 
 
    padding-left: 10px; 
 
} 
 

 
.currency-row td:last-child { 
 
    padding-right: 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div id="currencyTable"> 
 
    <table width="100%"> 
 
    <tr> 
 
     <th>Currency</th> 
 
     <th>Price</th> 
 
     <th>1d Change</th> 
 
     <th>1w Change</th> 
 
     <th>1y Change</th> 
 
     <th>% Index Market Cap</th> 
 
    </tr> 
 
    <tr class="even currency-row"> 
 
     <td>Bitcoin</td> 
 
     <td>2727.74 USD</td> 
 
     <td><i class="fa fa-caret-up fa-lg" aria-hidden="true"></i> + 1492.46</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td><i class="fa fa-caret-down fa-lg" aria-hidden="true"></i> 53.89 %</td> 
 
    </tr> 
 
    </table> 
 
</div>