Центрирующая позиция: относительно в пределах тд

Question

У меня есть таблица, и я хочу добавить аккордеонный переключатель в определенные строки, чтобы получить больше информации.Я нашел приятную +/- анимацию для переключения с аккордеоном, но не могу заставить его правильно центрироваться в моем тд.Мой код выглядит так:

<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;
}

Конечный результат выглядит так:

Знаки плюса не выровнены правильно, какие-либо указания о том, как это исправить?Спасибо!

Answer 1

Я собираюсь предположить, что вы говорите о вертикальном выравнивании знаков плюса внутри тд, хотя в нижнем предложении говорится, что они выровнены правильно, но они выровнены по верху, а не по центру.

Так как они абсолютно расположены, вам нужно дать им место внутри контейнера.Попробуйте взглянуть на эту кодовую ручку: 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;
}

• Фиксированная ссылка на кодовую ручку:)

Answer 2

Попробуйте центрировать его с помощью

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