Centering position: relative within a td - html

Question

I have a table and want to add an accordion toggle to certain rows to reveal more info. I found a nice looking +/- animation to go with the accordion toggle, but can't seem to get it to center correctly within my td. My code looks like this so far:
<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>
My CSS looks like this:
.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;
}
The end result looks like this:
The plus signs are not aligned correctly, any guidance on how to fix this?
Thanks!

Answer 1

I'm going to assume you are talking about vertically aligning the plus signs inside the td, although the sentence at the bottom says they are aligned correctly, but they are aligning to the top rather than vertical center.
Since they are absolutely positioned you need to give them a place to be within the container. Try taking a look at this codepen: https://codepen.io/samandalso/pen/LrbpqJ
.accordion-toggle::before,
.accordion-toggle::after {
content: '';
display: block;
position: absolute;
width: 12px;
height: 2px;
background-color: red;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.25s;
transition: all 0.25s;
top: 50%;
left: 0;
}
Fixed codepen link :)

Answer 2

Try centering it with
.accordion-toggle > span {
margin-left:20%;
top:50%;
}