Ионный список: как отредактировать стиль элементов списка?

Question

Я использовал следующий код в моем боковом меню:

<ion-side-menu side="left"> 
    <ion-content> 
     <div class="list"> 
      <a class="item" menu-close href="#/app/products"> 
       <img src="img/home.png" width="30px" /> 
       <!-- <i class="icon ion-home"></i> --> 
       <h2>YourPhoto24</h2> 
      </a> 
      <a class="item" menu-close href="#/app/account"> 
       <img src="img/profile.png" width="30px" /> 
       <h2>mein Konto</h2> 
      </a> 
      <a class="item" menu-close href="#/app/orders"> 
       <img src="img/orders.png" width="30px" /> 
       <h2>meine Bestellungen</h2> 
      </a> 
      <a class="item" menu-close href="#/app/receivers"> 
       <img src="img/receivers.png" width="30px" /> 
       <h2>meine Empfänger</h2> 
      </a> 
      <a class="item" menu-close href="#/app/email"> 
       <img src="img/email.png" width="30px" /> 
       <h2>Email an uns</h2> 
      </a> 
      <a class="item" menu-close href="#/app/recommend"> 
       <img src="img/recommend.png" width="30px" /> 
       <h2>Empfehlen Sie uns weiter 
        <p>mein Guthaben beträgt zur Zeit: </p> 
       </h2> 

      </a> 
      <a class="item" menu-close href="#/app/siteNotice"> 
       <img src="img/laws.png" width="30px" /> 
       <h2>AGB &amp; Impressung</h2> 
      </a> 
     </div> 
    </ion-content> 
</ion-side-menu> 

Так я хотел значок слева и текст справа по центру вертикально. К сожалению, я не получил результата я ожидал:

1: Как я могу управлять, чтобы получить больше пространства между изображением и текстом, и как я могу вертикально центрировать текст?

2: Как скрыть разделители?

3: Как увеличить верхнюю и нижнюю прописку элементов списка? Я хочу, чтобы они были 40px.

Я добавил следующее в мой файл CSS:

.menu.menu-left, .list a { 
    border-color: transparent; 
    padding-top: 30px; 
    padding-bottom: 30px; 
} 

.menu.menu-left, .list img { 
    float: left; 
    vertical-align: middle; 
} 

.menu.menu-left, .list h2 { 
    display: inline-block; 
} 

отступы и скрытие делителя работает с этим кодом. но мне не удастся выровнять текст рядом с изображением, центрированным по вертикали (оба должны быть центрированы по вертикали, изображение и текст!)

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

Answer 1

Ionic уже предоставляет много, чтобы сделать что-то подобное с уже выполненными стилями. Посмотрите на this example в их документации .:

<div class="list"> 
    <a class="item item-icon-left" href="#"> 
     <i class="icon ion-person"></i> 
     mein Konto 
    </a> 
    <a class="item item-icon-left" href="#"> 
     <i class="icon ion-navicon-round"></i> 
     meine Bestellungen 
    </a> 
    <a class="item item-icon-left" href="#"> 
     <i class="icon ion-heart"></i> 
     meine Empfänger 
    </a> 
    <a class="item item-icon-left" href="#"> 
     <i class="icon ion-email"></i> 
     Email an uns 
    </a> 
    <a class="item item-icon-left" href="#"> 
     <i class="icon ion-android-share-alt"></i> 
     Empfehlen Sie uns weiter 
    </a> 
</div> 

Вот немного codepen, чтобы продемонстрировать, что вы хотите:

http://codepen.io/anon/pen/ZGBegG