如何在这个div的中心定位文本？

Question

这是一个例子：

没有图标，文字在中间，当我添加这些图标（浮动：右）时，文本向左移动而不再在中间？关于如何将它置于中间的任何建议？

源代码：

<div class="alert alert-success text-center text-uppercase" ng-show="vm.data">
    {{vm.showFoundItems(filteredItems.length)}}
    <a href="/RealSuiteApps/RealSuite/-1/WorkOrder/Index/" target="_blank"><img src="~/Content/images/icon-search35.png" class="pull-right" style="margin: -7px 0 -7px 10px" /></a>
    <img src="~/Content/images/icon-sort35.png" class="pull-right" style="margin: -7px 0 -7px 10px" ng-click="filterVisible = !filterVisible" />
</div>

更新

嗯，感谢DIV的建议，它完成了这项工作，只需要设置适当的图标＆＃39;边距将它们垂直放在同一条线上

<div class="alert alert-success text-center text-uppercase" ng-show="vm.data">
    <div>{{vm.showFoundItems(filteredItems.length)}}</div>
    <a href="/RealSuiteApps/RealSuite/-1/WorkOrder/Index/" target="_blank"><img src="~/Content/images/icon-search35.png" class="pull-right" style="margin-top: -27px" /></a>
    <img src="~/Content/images/icon-sort35.png" class="pull-right" style="margin-top: -27px; margin-right: 10px" ng-click="filterVisible = !filterVisible" />
</div>

Answer 1

这种情况正在发生，因为您的图像正在影响包含div的可用宽度。获得所需效果的最简单方法是将{{vm.showFoundItems（filteredItems.length）}}包装到其自己的包含div中。这是一个代码示例的链接，显示它已完成。 codpen

<div> {{vm.showFoundItems(filteredItems.length)}} </div>