Ionic list: How to edit the style of the list items? - ionic-framework

Question

I used the following code inside my side menu:
<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 & Impressung</h2>
</a>
</div>
</ion-content>
</ion-side-menu>
So i wanted an icon at the left and the text to the right centered vertically. Unfortunately i did not get the result i expected:
1: How can i manage to get more space between the image and the text and how can i vertically center the text?
2: How can i hide the dividers?
3: How can i increase the top and bottom padding of the list items? I want them to be 40px.
I added the following to my css file:
.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;
}
The padding and the hiding of the divider works with that code. but i cant manage to pretty align the text next to the image centered vertically (both should be centered vertically, the image and the text!)
So whats left is: How can i manage to get more space between the image and the text and how can i vertically center the text?

Answer 1

Ionic already provides a lot to do something like this with stylings they already made. Take a look at this example in their docs.:
<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>
Here is a little codepen to demonstrate what you want:
http://codepen.io/anon/pen/ZGBegG