将元素设置为右侧然后居中

Question

我创建了一个简单的列表，并希望为已完成的项目添加一个检查图标，然后添加一个＆＃34;添加受益人＆＃34;右侧未完成项目的按钮。我通过使用margin-left：auto来实现这一点;但是如果他们被推到右边然后集中在一起，那就认为它看起来会更好。我有一个简单的方法吗？现在我的列表看起来像这样：

我希望按钮和检查图标位于右侧，但是它们之间居中。我的HTML看起来像这样：

NaN

有没有一种有效的方式来设计这个？谢谢！

Answer 1

这是使你成为中心所需要做的。您需要为div添加特定宽度。试试这个。

<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;
}