如何对齐表格单元垂直中心的CSS箭头？

我有一个CSS箭头，并在表格单元格一些文本...如何对齐表格单元垂直中心的CSS箭头？

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

如何获得的箭头对齐到文本的左侧，并在单元格中的垂直中心？我曾尝试上的箭头下面的造型......

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

但是箭头仍然对准上面的文字 - https://jsfiddle.net/s8e5k3st/。任何建议，以获得正确的路线赞赏。

来源

2017-09-05 Dave

只需添加display:inline-block;至arrow-up类。

.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

来源

2017-09-05 15:19:51 Baro

只是想给你一个替代解决方案，使用字体真棒

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

来源

2017-09-05 15:34:32

如何对齐表格单元垂直中心的CSS箭头？

回答

相关问题