CODEWITHSUNDEEP
csstwitter-bootstrap-3
Slava
Slava

Reputation: 6640

How to position text in the center of this div?

here is the example:

enter image description here

Without the icons, the text is in the middle, when I add these icons (float: right), the text is moved to the left and is no longer in the middle? Any suggestion on How to place it in the middle?

Source code:

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

Update

Well, thanks about DIV suggestion, it made this work, just needed to set appropriatly icons' margins to position them on the same line vertically

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

enter image description here

Upvotes: 0

Views: 36

Answers (1)

CodeBroJohn
CodeBroJohn

Reputation: 1085

This is happening because your images are effecting the useable width of there containing div. The easiest way for you to get your desired effect is to wrap your {{vm.showFoundItems(filteredItems.length)}} into its own containing div. Here is a link to a codepen example showing it done. codpen

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

Upvotes: 1

Related Questions