我有一张桌子,但图标没有与文字水平对齐。当表头文本很长时,图标会显示在文本下面,如下所示:
这是表头的html:
<thead class="thead-default">
<tr><th> </th>
<th>id
<a href="/web/app_dev.php/candidates?sort=desc&cat=id"><i class="fa fa-chevron-down"></i></a>
</th>
<th>benaderd
<a href="/web/app_dev.php/candidates?sort=desc&cat=approached"><i class="fa fa-chevron-down"></i></a>
</th>
<th>naam
<a href="/web/app_dev.php/candidates?sort=desc&cat=name"><i class="fa fa-chevron-down"></i></a>
</th>
<th>skills
<a href="/web/app_dev.php/candidates?sort=desc&cat=skills"><i class="fa fa-chevron-down"></i></a>
</th>
<th>email
<a href="/web/app_dev.php/candidates?sort=desc&cat=email"><i class="fa fa-chevron-down"></i></a>
</th>
<th>telefoon
<a href="/web/app_dev.php/candidates?sort=desc&cat=mobile"><i class="fa fa-chevron-down"></i></a>
</th>
<th>stad
<a href="/web/app_dev.php/candidates?sort=desc&cat=city"><i class="fa fa-chevron-down"></i></a>
</th>
</tr>
</thead>
这是scss代码:
.table {
.thead-default {
th {
//&:nth-of-type(3){
// display: inline-flex;
//}
font-size: 14px;
font-weight: 500;
color: #4a4a4a;
text-transform: uppercase;
@include media-breakpoint-up(md){
//&:nth-of-type(2) {
// width: 80px;
//}
//
//&:last-of-type {
// width: 95px;
//}
}
}
}
td {
vertical-align: middle;
}
.profile-pic {
width: 50px;
height: 50px;
border-radius: 100%;
.initial {
height: 100%;
color: #fff;
}
}
a {
&:hover {
cursor: pointer;
}
.more_horiz {
line-height: 36px;
}
}
}
如何将图标与表格标题文字对齐?如您所见,我首先尝试设置表头的宽度。