IONIC两个图标之间的文本

Question

我想在列表中有一个离子项，其中一个词位于两个图标之间（一个在左侧，一个在右侧），如下所示：

我无法实现这一目标，因为我有类似的东西：

这是我的代码：

<ion-list>
<ion-item class="item item-icon-left item-icon-right" style="text-align: center">
    <ion-icon item-left name="lock"></ion-icon>
       <b>Woman</b>
     <ion-icon item-right name="lock"></ion-icon>
</ion-item>  

我怎样才能在第一张图片中找到正确居中的文字？

Answer 1

您可以使用text-align属性作为文本的中心，如下所示

<ion-list>
<ion-item class="item item-icon-left item-icon-right" style="text-align: center">
    <ion-icon item-left name="lock"></ion-icon>
    <ion-label class="centerlabel">Woman</ion-label>
    <ion-icon item-right name="lock"></ion-icon>
</ion-item>  

<强> SCSS

.centerlabel {
        text-align: center;
    }

希望这会有所帮助！

Answer 2

试试这个

<ion-list>
<ion-item >
    <ion-icon item-left name="lock"></ion-icon>
       <div text-center><b style="margin-left: -20px;">Woman</b></div>
     <ion-icon item-right name="lock"></ion-icon>
</ion-item>  
  </ion-list>

Answer 3

（代表问题作者发布解决方案）。

<ion-list>
<ion-item>
   <ion-row>
      <ion-col col-1 style="text-align: left;">
         <ion-icon name="lock"></ion-icon>
      </ion-col>
      <ion-col col-10 style="text-align: center;">
         <b>Woman</b>
      </ion-col>
      <ion-col col-1 style="text-align: right;">
         <ion-icon name="lock"></ion-icon>
      </ion-col>
   </ion-row>
</ion-item>
</ion-list>