Can't get alignment right - css

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 && !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 && !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%;
}