How do you align two items in the center of a border?

Question

I wrote this css in order to align my text to the center of a bottom border -

.arrow-down
  width: 2rem
  display: inline
  position: absolute
  top: -0.6rem
  left: 50%
  margin-left: -59px
  background: $grey_200
  z-index: 5

.showless
  > section
    width: 100%
    text-align: center
    border-bottom: 0.1rem solid $grey_300
    line-height: 0.1em
    margin: 1rem 0 2rem
    background: $grey_200
    > span
      width: 6rem
      margin-right: -5.6rem
      right: 56%
      position: absolute
      top: 0
      background: $grey_200
      padding: 0 10px
.showless
  position: relative
  .content
    overflow: hidden
    transition: all linear 0.5s
    -webkit-transition: all linear 0.5s
  .trigger
    display: inline-block
    cursor: pointer
    position: relative

My html is

<div class="showless">
  <div ng-transclude class="content" ng-style="style">

  </div>
  <section class="trigger" ng-if="showSection" ng-click="toggleMore($event)">
    <i class="arrow-down"></i>
    <span>{{more ? "More":"Less"}}</span>
  </section>
</div>

It ends up looking off center. Any ideas on how to bring the down arrow and More text in center? Looks like this -

Answer 1

Just apply text-align to the section:

.trigger{
  text-align: center;
}

<div class="showless">
  <div ng-transclude class="content" ng-style="style">

  </div>
  <section class="trigger" ng-if="showSection" ng-click="toggleMore($event)">
    <i class="arrow-down"></i>
    <span>{{more ? "More":"Less"}}</span>
  </section>
</div>