How to align inner text in div

Question

I am trying to align the text inside a div in center of the page and also text start from left side. But getting a problem as role1, role2 text is showing in center of Role(r) text i want that all the text should right aligned but in center of the page.

 .home-role-access-text { text-align: center; height: 20px; width: 250px; position: absolute; top: 60%; left: 50%; margin-left: -125px; font-size: 20px; color: #026890; } 

 <div class="home-role-access-text" data-ng-show="alarmsCounter <= 0"> <div> <div data-ng-hide="assignedRoles.length<=0"> <div style="padding-bottom: 10px;"><b>Role(r)</div> <div style="font-size:11px;font-weight: 100;display: inline-block; text-align: left" data-ng-repeat="role in assignedRoles">Role1 </div> <div style="font-size:11px;font-weight: 100;display: inline-block; text-align: left" data-ng-repeat="role in assignedRoles">Role3 </div> </div> </div> </div> 

Answer 1

Going by your image it seems you want all text left aligned inside a div that is right aligned of the center.

Based on that, you can float the container right with all text aligned left.

 .home-role-access-text { border: 1px solid black; text-align: left; height: 20px; width: 250px; position: absolute; top: 60%; left: 50%; margin-left: -125px; font-size: 20px; color: #026890; } .roles { float:right } 

 <div class="home-role-access-text" data-ng-show="alarmsCounter <= 0"> <div> <div data-ng-hide="assignedRoles.length<=0" class="roles"> <div style="padding-bottom: 10px;"><b>Role(r)</b></div> <div style="font-size:11px;font-weight: 100;display: block; text-align: left;" data-ng-repeat="role in assignedRoles">Role1 </div> <div style="font-size:11px;font-weight: 100;display: block; text-align: left;" data-ng-repeat="role in assignedRoles">Role3 </div> </div> </div> </div> 

The black border in the example is only added to show the div is still centered with right aligned text - You can off course, remove it :)

Answer 2

Change display in the child divs of <div class="roles"> to block instead of inline-block .

I have included a jsfiddle as well. I had to change the CSS for .home-role-access-text to get all text to start on the left and stay within it's container. I suggest using display: flex because it's better at centering a block of content. https://jsfiddle.net/Luxz8eff/

.home-role-access-text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 20px;
  color: #026890;
}

<div class="home-role-access-text" data-ng-show="alarmsCounter <= 0">
  <div>
    <div data-ng-hide="assignedRoles.length<=0">
      <div style="padding-bottom: 10px;"><b>Role(r)</b></div>

  <div style="font-size:11px;font-weight: 100;display: block; text-align: left" data-ng-repeat="role in  assignedRoles">Role1 </div>
  <div style="font-size:11px;font-weight: 100;display: block; text-align: left" data-ng-repeat="role in  assignedRoles">Role3 </div>

</div>