我有一个动态表,动态没有列和行...在表头,我需要垂直中心修复排序图标..甚至表头文本大小是动态的,没有行保持增长...如何垂直对齐文本大小不断增加时排序图标?
<table style="width:100%">
<tr>
<th><div class='filter-container header-container'> <div class='header-text'> Firstname Firstname Firstnam eFirstnam eFirstname Firstname Firstname Firstname Firstname</div><div class='icon-right'> <span class= "fa fa-sort-asc fa-lg sort-icon "></span><span class= "fa fa-sort-desc fa-lg sort-icon "></span></div></div></th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
CSS:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
.filter-container {
width: 100%;
height: 100%;
position: relative;
padding: 0px !important;
margin: 0px !important;
}
.header-container {
height: 100%;
vertical-align: middle;
text-align: center;
}
.header-text {
font-size: 22px;
line-height: 24px;
color: #000000;
font-weight: normal;
width: 90%;
float: left;
letter-spacing: 0;
text-align: left;
}
.sort-icon {
float: right !important;
clear: right;
height: 1px !important;
}
使用整个表头单元格内容的包装器。在其中,使用两个元素。文字和图标:
<th>
<div class="aligner">
<div class="text">any text here can be as long as you want</div>
<div class="icon">your icon here</div>
</div>
</th>
并使用:
th .aligner {
display: flex;
align-items: center;
}
显然,两个对齐的元素需要具有相等的垂直padding
,border
和margin
s。
使用刚刚添加的示例,这是一个启动器:https://jsfiddle.net/websiter/h94yen82/
我删除了分拣机的样式并添加了:
.header-container {
justify-content: space-between;
}
.sort-icon {
display: flex;
flex-direction: column;
justify-content: center;
height: 0;
}
快速/简单修复,将其添加到.icon-right
:
.icon-right {
...
top: calc(50% - 8px);
position: relative;
}
由于您要将其应用于所有列,请尝试以下操作:
.icon-right {/* Add this new class */
top: calc(50% - 8px);
position: absolute;
right: 5px;
}
th {/* Add this new class */
position: relative;
}
.filter-container {
...
/*position: relative;*/ /* remove this line */
...
}
试试吧jsfiddle。
这个怎么样?
.header-container {
height: 100%;
vertical-align: middle;
text-align: center;
overflow: hidden;
}
.icon-right {
position: absolute;
top: 50%;
right: 0;
margin-top:-10px;
}
试试这个
.header-container {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
试试这些属性我觉得它对你有用。
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.icon-right {
margin-top: -15px;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
.filter-container {
width: 100%;
height: 100%;
position: relative;
padding: 0px !important;
margin: 0px !important;
}
.header-container {
height: 100%;
vertical-align: middle;
text-align: center;
}
.header-text {
font-size: 22px;
line-height: 24px;
}
.header-text {
color: #000000;
font-weight: normal;
}
.header-text {
width: 90%;
float: left;
text-align: start;
letter-spacing: 0;
text-align: left;
}
.sort-icon {
float: right !important;
clear: right;
height: 1px !important;
}
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.icon-right {
margin-top: -15px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<table style="width:100%">
<tr>
<th><div class='filter-container header-container'> <div class='header-text'> Firstname Firstname Firstnam eFirstnam eFirstname Firstname Firstname Firstname Firstname</div>
<div class='icon-right'> <span class= "fa fa-sort-asc fa-lg sort-icon "></span><span class= "fa fa-sort-desc fa-lg sort-icon "></span></div></div></th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
这是我的代码笔链接
你可以使用transform来使div垂直对齐
.icon-right{
top: 40%;
transform: translateY(-40%);
position: relative;
line-height: 1.8em;
}
几乎答案设置两个图标的高度是0px或1px使两个图标差不多,所以无法点击排序。我认为你应该使用另一个图标(或图像)宽度距离到顶部和底部理性(如fa-caret
)。这个怎么样?