Question

这个bootstrap手风琴是使用AngularJS构建的：http://jsfiddle.net/Mrbaseball34/c6Lw2/

<div class="accordion-group ng-scope" ng-repeat="program in programs">
        <div class="accordion-inner">
            <div class="acc_label ng-binding">The Certified Insurance Counselors Program (CIC)</div>                                    
            <div class="pull-right select_links">
                <a ng-click="reselect($index)" class="ng-binding">Select All</a> |
                <a ng-disabled="!select_action($index)" ng-click="program.expand=!program.expand" class="ng-binding">Expand</a>
            </div>
        </div>
    <div ng-repeat="topic in program.topics" collapse="!program.expand &amp;&amp; !topic.checked" class="ng-scope collapse" style="height: 0px;">
        <div class="accordion-inner">
            <label class="checkbox"><input type="checkbox" value="CIC Agency Management" ng-checked="topic.checked" ng-model="topic.checked" class="ng-pristine ng-valid"><span class="ng-binding">CIC Agency Management</span></label>
        </div>
    </div>
    <div ng-repeat="topic in program.topics" collapse="!program.expand &amp;&amp; !topic.checked" class="ng-scope collapse" style="height: 0px;">
        <div class="accordion-inner">
            <label class="checkbox"><input type="checkbox" value="CIC Commercial Casualty" ng-checked="topic.checked" ng-model="topic.checked" class="ng-pristine ng-valid"><span class="ng-binding">CIC Commercial Casualty</span></label>
        </div>
    </div>
</div>

但我无法在容器中间对齐“Select All | Expand”链接。任何CSS专家可以帮忙吗？

不要担心“全选|扩展”功能。我只需要校正对齐。

另外，我很遗憾CSS文件必须在线而不是嵌入在小提琴中。

我认为没有说清楚，我希望“Select All | Expand”链接垂直居中，如下所示：

enter image description here

@Mohsen推荐的更改后：

enter image description here

展开后，应该保持在小组名称附近。

Answer 1

水平对齐：

删除pull-right课程并将text-align:center设为.select_links：

DEMO

HTML

<div class="select_links">  <!-- pull-right remove  -->
<a ng-click="reselect($index)" class="ng-binding">Select All</a>
 | 
<a ng-disabled="!select_action($index)" ng-click="program.expand=!program.expand" class="ng-binding">Expand</a>
</div>

CSS

.select_links {
position: relative;
line-height: 100%;
vertical-align: middle;
text-align: center;   /*  added  */
}

更新 - 垂直对齐

需要在position:relative上设置accordion-group，为此，您可以将此类添加到该标记中，如下所示：

<div class="accordion-group ng-scope relative"  <!-- relative added  -->
ng-repeat="program in programs">
...
</div>

带回pull-right并将vertical（或其他内容）类添加到您的链接容器中，如下所示：

<div class="pull-right select_links vertical">  <!-- vertical added  -->
...
</div>

然后将这些样式添加到CSS中：

.relative{
    position:relative;
}
.vertical{
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -3px;  /* you can change it if is not enough */
}

jsFiddle is HERE

enter image description here

注意： 您可以将此样式添加到引导类中，但我认为这不是一个好方法。

修改：将relative类设置为标题容器：DEMO

<div class="accordion-inner relative">...</div>

Answer 2

试试这个

.select_links {
position: relative;
line-height: 100%;
vertical-align: middle;
margin: 0 auto;
width: 70%;
}

无法正确对齐

2 个答案: