居中位置: td内的相对位置
居中位置: td内的相对位置
提问于 2018-06-08 05:38:09
我有一个表格，想要添加一个折叠开关到某些行，以显示更多的信息。我找到了一个漂亮的+/-动画来配合手风琴的切换，但似乎不能让它在我的td中正确居中。到目前为止，我的代码如下所示：
<tr ng-repeat="item in c.list track by $index" ng-if="$index >= data.window_start && $index < data.window_end">
<td>
<div ng-class="{'accordion-toggle collapsed':item.work_history_type == 'Uniformed Service'}" data-toggle="collapse" href="#{{item.sys_id}}" role="button" aria-expanded="false" aria-controls="collapseDetails"></div>
</td>
<td>{{item.work_history_type}}
</td>
<td>{{item.work_name}}
<div id="{{item.sys_id}}" class="collapse">
<div ng-repeat="item2 in c.list2 | filter: {'uni' : item.sys_id}">
<span ng-click="c.newEntry(item2.sys_id, 'campaign_table','newWork')"class="h4 edit" >{{item2.camp}}: From: {{item2.from}} To: {{item2.to}}</span>
</div>
</div>
</td>
<td>{{item.from}}</td>
<td>{{item.to}}</td>
</tr>我的CSS看起来像这样：
.accordion-toggle {
position: relative;
}
.accordion-toggle::before,
.accordion-toggle::after {
content: '';
display: block;
position: absolute;
width: 12px;
height: 2px;
background-color: $color-darkest;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.accordion-toggle::before {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
.accordion-toggle.collapsed::before {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
.accordion-toggle.collapsed::after {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.accordion-toggle > span {
margin-left: 20px;
}最终结果如下所示：
加号没有正确对齐，有什么关于如何解决这个问题的指导吗？谢谢!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50750528
复制相关文章
相似问题