html - 如何对齐div中的内部文本

Question

我正在尝试对齐页面中心的 div 内的文本，并且文本也从左侧开始。但是出现问题，因为 role1、role2 文本显示在 Role(r) 文本的中心，我希望所有文本都应右对齐但位于页面中心。

.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

更改 display在 <div class="roles"> 的子 div 中至 block而不是 inline-block .

我也包含了一个 jsfiddle。我必须更改 .home-role-access-text 的 CSS让所有文本从左侧开始并留在其容器内。我建议使用 display: flex因为它更适合将内容 block 居中。 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>