如何对齐表格单元垂直中心的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/。任何建议,以获得正确的路线赞赏。
答
只需添加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;
}
答
只是想给你一个替代解决方案,使用字体真棒
<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>