离子离子物品右侧和以物品为中心

Question

I have a question for the ionic framework, i hope someone can help me... I have an ion-list with "ion-item-right". This is all ok, the button is on the right. Now i need to have three other icons, which are centered, so that i have: text - 3 icons centered - 1 icon right

this is my code:

<ion-item
        class="item-stable accordion item-icon-right"
        ng-show="!skillHasSubskill(skill)">
        {{skill.skillName}}
        <i class="icon ion-star"></i>
        <i class="icon ion-star"></i>
        <i class="icon ion-star"></i>
        <a class="button marginrighticon button-icon icon ion-close energized" ng-click="deleteSkill(skill)"></a>
    </ion-item>

Of course, this isn´t working. The three "ion-stars" should be centered, but i haven´t found a tag by which i can do this... I hope someone can help me ;)

Answer 1

I think you have to do some CSS styling... like this:

  <ion-item class="item-stable accordion item-icon-right item-button-right" ng-show="!skillHasSubskill(skill)">
    {{skill.skillName}}
    <div class="icon" style="margin-right: 80px">
      <i class="ion-star"></i>
      <i class="ion-star"></i>
      <i class="ion-star"></i>
    </div>
    <a class="button button-icon" ng-click="deleteSkill(skill)">
      <i class="icon ion-close energized"></i>
    </a>        
  </ion-item>

Answer 2

for everyone with the same problem... the solution above is in many ways correct, but i had to adopt it a little bit... here´s my code:

<ion-item
        class="item-stable accordion nopadding"
        ng-show="!skillHasSubskill(skill)">
    <div class="row">
        <div class="col">{{skill.skillName}}</div>
        <div class="col">
            <i class="padding-right icon ion-star"></i> <i
                class="padding-left padding-right icon ion-star"></i> <i
                class="padding-left icon ion-star"></i>
        </div>
        <a
            class="button button-icon button-right icon ion-close energized"
            ng-click="deleteSkill(skill)"></a>
    </div>
    </ion-item>

i had to do it, because in the other way posted above the height of the ion-item was too big because the icons were interpreted in an own line, not in the same one as the normal text ;)

but thank you very much!

edit: i have another silly problem: the text isn´t aligned vertically... vertical-align:middle isn´ta solution (aligned to col & row)... has anyone an idea??