如何对齐边界中心的两个项目？

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>