如何对齐边界中心的两个项目?
问题描述:
我为了我的文字对齐到下边框的*写了这个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>
它最终看起来偏离中心。关于如何将向下箭头和更多文字置于中心的任何想法?看起来是这样的 -
答
只需将文本对齐到部分:
.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>
+0
这似乎并不奏效。仍然看起来完全一样... – Suchi 2015-02-06 18:31:27
+0
运行您的代码段并通过运行我的代码段来区分... – 2015-02-06 18:33:14
是的,这是上海社会科学院。 – Suchi 2015-02-06 18:17:00