如何在边框中心对齐两个项目？

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>

如何在边框中心对齐两个项目？

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

html

javascript

css

sass