如何對齊邊界中心的兩個項目？

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>