How to align inner text in div - html

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

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

Answer 2

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