Can't get alignment right

Question

This bootstrap accordion is built using 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>

But I cannot get the "Select All | Expand" links aligned in the middle of the container. Can any CSS gurus help out?

Don't worry about the "Select All | Expand" functionality. I just need the alignment corrected.

Also, I'm sorry that the CSS files have to be online vs. embedded in the fiddle.

I don't think it was made clear, I wanted the "Select All | Expand" links centered vertically like this:

After changes recommended by @Mohsen:

When expanded, it should stay near the group title.

Answer 1

horizontal align:

remove pull-right class and set text-align:center to .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  */
}

---

update - vertical align

need to set position:relative on your accordion-group, for doing that you can add this class to that tag like this:

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

bring back pull-right and add vertical (or something else) class to your links container like this:

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

then add these styles to your 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

note: you can add this styles to your bootstrap classes but I think this is not a good way.

edit: set relative class to the title container: DEMO

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

Answer 2

try this

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