Próbuję dopasować tekst wewnątrz div w centrum strony, a także tekst zaczyna się od lewej strony. Ale uzyskanie problemu jako Role1, Tekst Rola2 pokazuje w centrum roli (R), chcę, aby cały tekst powinien być wyrównany w prawo, ale w środku strony.

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

enter image description here

0
user526206 17 luty 2017, 17:51

2 odpowiedzi

Najlepsza odpowiedź

Zmień display w dziećmi div <div class="roles"> do block zamiast inline-block.

Obejmowałem także JSFiddle. Musiałem zmienić CSS dla .home-role-access-text, aby uzyskać cały tekst, aby rozpocząć po lewej stronie i pozostać w jego pojemniku. Proponuję przy użyciu display: flex, ponieważ jest lepiej w centrowaniu bloku treści. 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>
0
Paul Allen 17 luty 2017, 15:19

Wygląda na twoim obrazem Wygląda na to, że chcesz, aby cały tekst został wyrównany wewnątrz Div, który jest prawdy wyrównany w środku.

Na podstawie tego można płynąć pojemnik w prawo ze wszystkimi wyrównaniem tekstu.

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

Czarna granica w przykładzie jest dodawana tylko do pokazania Div wciąż wyśrodkowana z prawym wyrównanym tekstem - możesz wyłączyć, usunąć go :)

1
Nope 17 luty 2017, 15:16