如何在邊框中心對齊兩個項目？

Question

我寫這個CSS的目的是使我的文字與下邊框的中心對齊-

.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

我的HTML是

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

最終偏離中心。 關於如何將向下箭頭和更多文本置於中心的任何想法？ 看起來像這樣-

Answer 1

只需將文本對齊方式應用於該部分：

 .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>