Html 如何对齐div中的内部文本

我试图在页面中央的一个div中对齐文本，并且文本从左侧开始。但是角色1，角色2的文本显示在角色（r）文本的中心，我希望所有文本都应该右对齐，但在页面的中心

.home角色访问文本{
文本对齐：居中；
高度：20px；
宽度：250px；
位置：绝对位置；
最高：60%；
左：50%；
左边距：-125px；
字体大小：20px；
颜色：#026890；
}

角色（r）
角色1
角色3

从图像看，似乎您希望所有文本在与中心右对齐的div内左对齐

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

.home角色访问文本{
边框：1px纯黑；
文本对齐：左对齐；
高度：20px；
宽度：250px；
位置：绝对位置；
最高：60%；
左：50%；
左边距：-125px；
字体大小：20px；
颜色：#026890；
}
.角色{
浮球：对
}

角色（r）
角色1
角色3

从图像看，似乎您希望所有文本在与中心右对齐的div内左对齐

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

.home角色访问文本{
边框：1px纯黑；
文本对齐：左对齐；
高度：20px；
宽度：250px；
位置：绝对位置；
最高：60%；
左：50%；
左边距：-125px；
字体大小：20px；
颜色：#026890；
}
.角色{
浮球：对
}

角色（r）
角色1
角色3

将

的子div中的
显示
更改为
块
，而不是
内联块

我还包括了一个jsfiddle。我必须更改
.home-role-access-text
的CSS，以使所有文本从左侧开始并保持在其容器中。我建议使用
display:flex
，因为它更适合将内容块居中

.home角色访问文本{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100%；
身高：100%；
字体大小：20px；
颜色：#026890；
}
角色（r）
角色1
角色3


将
的子div中的
显示
更改为
块
，而不是
内联块

我还包括了一个jsfiddle。我必须更改
.home-role-access-text
的CSS，以使所有文本从左侧开始并保持在其容器中。我建议使用
display:flex
，因为它更适合将内容块居中

.home角色访问文本{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100%；
身高：100%；
字体大小：20px；
颜色：#026890；
}
角色（r）
角色1
角色3


你应该使用
p
内置de div你能告诉我在哪里需要使用你能添加一张显示你想要的图片吗？我已经添加了一张图片。你应该使用
p
内置de div你能告诉我在哪里需要使用你能添加一张显示你想要的图片吗？我已经添加了一张图片。这不是我要找的，我已经添加了一个图片，我想看起来像这样。请查看我的帖子对不起，我看不到我正在浏览的图片。图片被阻止了。我只能根据你的解释来解释。@user526206你说你希望文本在页面中央右对齐，所以这就是你得到的。@user526206如果你还想要
角色（r）
text right aligned然后使用现有的容器…我更新了代码。@user526206我检查了手机上的图像，发现您似乎不希望所有文本都像您的问题所暗示的那样右对齐，而是在与中心右侧对齐的容器中左对齐。我更新了我的答案，并认为现在可以了忽略黑色边框，这只是为了显示主容器仍然居中。这不是我要找的，我已经添加了一张我想要的图片。请查看我的帖子对不起，我看不到我正在浏览的图片。图片被阻止了。我只能根据你的解释来解释。@user526206你说你希望文本在页面中央右对齐，所以这就是你得到的。@user526206如果你还想要
角色（r）
text right aligned然后使用现有的容器…我更新了代码。@user526206我检查了手机上的图像，发现您似乎不希望所有文本都像您的问题所暗示的那样右对齐，而是在与中心右侧对齐的容器中左对齐。我更新了我的答案，并认为现在可以了忽略黑色边框，这只是表示主容器仍然居中。
.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>