Styling elements to the right and then centering - html

Question

I've created a simple list and want to push a check icon for completed items and an "add beneficiary" button for uncompleted items to the right. I've achieved that by using margin-left:auto; but think it would look better if they were pushed to the right and then centered among themselves. Is there an easy way for me to do this? Right now my list looks like this:
I would like the button and the check icon to be to the right, but centered among themselves. My html looks like this:
<div class="flex">
<div>
<a class="flex collapsed" ng-class="{'accordion-toggle collapsed':item.beneficiaries.length>0}" ng-if="item.beneficiaries.length>0" data-toggle="collapse" href="#{{item.benefit_type_sysID}}" role="button" aria-expanded="false" aria-controls="collapseDetails">
<span class="h4" >{{item.benefit_type_name}}</span>
</a>
<h1 class="h4 flex collapsed" ng-if="item.beneficiaries.length==0">
{{item.benefit_type_name}}
</h1>
</div>
<div style="margin-left:auto;">
<button title="Add a beneficiary" type="button" class="btn btn-primary text-uppercase" ng-if="item.beneficiaries.length==0" ng-click="c.newEntry(-1, 'sn_hr_core_beneficiary','newBene')">Add Beneficiary</button>
<i title="Beneficiaries total 100%" class="fa-2x fa fa-check-circle success" aria-hidden="true" ng-if="item.beneficiaries.length>0 && item.percent_total==100"></i>
<i title="Beneficiaries do NOT total 100%" class="fa-2x fa fa-exclamation-circle warning" aria-hidden="true" ng-if="item.beneficiaries.length>0 && item.percent_total!=100"></i>
</div>
</div>
Is there an efficient way to style this? Thanks!

Answer 1

This is what you need to do to make it center. You need to add a specific width to the div. Try this.
<div class="action">
<button title="Add a beneficiary" type="button" class="btn btn-primary text-uppercase" ng-if="item.beneficiaries.length==0" ng-click="c.newEntry(-1, 'sn_hr_core_beneficiary','newBene')">Add Beneficiary</button>
<i title="Beneficiaries total 100%" class="fa-2x fa fa-check-circle success" aria-hidden="true" ng-if="item.beneficiaries.length>0 && item.percent_total==100"></i>
<i title="Beneficiaries do NOT total 100%" class="fa-2x fa fa-exclamation-circle warning" aria-hidden="true" ng-if="item.beneficiaries.length>0 && item.percent_total!=100"></i>
</div>
CSS,
.action {
margin-left: auto;
width: 140px;
text-align: center;
}