I have been attempting to center align the text inside the ion-list items by using text-align: center in the following CSS:
.my-profile-bar-content{
padding-top:34px ;
height: 250px;
text-align: center;
}
However, for some reason, the first item (the 'Login' one) is not centered like the others. Here is a screenshot for reference:
Here is the HTML code that I am using:
<ion-popover-view>
<ion-header-bar class="my-profile-bar-header">
<span class="my-profile">
<img src="../img/no-face.png">
<h1 class="title" style="margin-top: 20px">My Full Name</h1>
</span>
</ion-header-bar>
<ion-content class="my-profile-bar-content">
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-popover-view>
</script>
Any assistance on resolving this issue would be greatly appreciated.