ИОННЫЙ Текст между двумя иконками - PullRequest
Новая
       8

ИОННЫЙ Текст между двумя иконками

0 голосов
/ 10 мая 2018

Я хотел бы добавить элемент ion в список со словом, расположенным в центре между двумя значками (один слева и один справа), например:

enter image description here

Я не могу достичь этой цели, потому что у меня есть что-то вроде этого:

enter image description here

Это мой код: 

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

Как можно получить что-то похожее на первое изображение, где текст правильно отцентрирован?

Ответы [ 3 ]

0 голосов
/ 10 мая 2018

попробуйте 

<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>
0 голосов
/ 12 мая 2018

(Размещено решение от имени автора вопроса) . 

<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>
0 голосов
/ 10 мая 2018

Вы можете использовать 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;
    }

Надеюсь, это поможет!

...