Text between two icons (left and right)

Ionic Framework ionic-v3
1

I would like to have an ion-item inside a list with a word centered between two icons (one on left side and one on right side) like this:
correct

I’m not able to achieve this goal, because I have something like that:
wrong

This is my code:

<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>  
 </ion-list>

How can I have something like in the first image?

2

you can use ion-grid for this. something like this.

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

           <b>Woman</b></ion-col>
<ion-col col-3>

         <ion-icon item-right name="lock"></ion-icon></ion-col>
    </ion-item>  
 </ion-list>```
4

thank you for you answer. Unfortunately grid or rows don’t work, same or worst result than mine.

5

Try this

<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>
2 Likes
6

If you don’t get any better answers, doing this with flexbox is pretty straightforward:

<ion-list>
  <ion-item>
    <div item-content style="display: flex; justify-content: space-between; width: 100%">
      <ion-icon style="flex-grow: 0" name="lock"></ion-icon>
      <div style="flex-grow: 1; text-align: center"><b>Woman</b></div>
      <ion-icon style="flex-grow: 0" name="lock"></ion-icon>
    </div>
  </ion-item>
</ion-list>
7

I think ion-item has an inherent padding-left: 16px.

Maybe setting that particular item’s padding-left to 0 will do it

9

Thank you! this solved my problem :smiley: