如何在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

按照您的图片，您似乎希望所有文字在对齐中心的div内对齐。

基于此，您可以向右浮动容器，并将所有文本左对齐。

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

示例中的黑色边框仅用于显示div仍然以右对齐文本居中 - 您可以偏离正轨，将其删除：）

Answer 2

将display的子div中的<div class="roles">更改为block而不是inline-block。

我也包括了一个jsfiddle。我不得不更改.home-role-access-text的CSS以使所有文本从左侧开始并保留在其容器中。我建议使用display: flex，因为它可以更好地集中内容块。 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>