CODEWITHSUNDEEP
htmlcssionic-framework
user6039980
user6039980

Reputation: 3506

Ionic: Unable to align the text of ion-list items

I'm trying to align the text centrally inside the ion-list items, using text-align using text-align: center inside the following css code:

.my-profile-bar-content{
      padding-top:34px ;
      height: 250px;
      text-align: center;
      }

But I don't know why I'm getting the first item (the 'Login' one) out of being centered with the others, here is the screenshot:

And this is my used HTML code:

    <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 help will be much appreciated.

Upvotes: 3

Views: 617

Answers (1)

Gynteniuxas
Gynteniuxas

Reputation: 7093

With the help of Developer's Tools (F12 or right click -> last option) check what additional style rules are applied to this particular menu. It is worth to note that Login button is a button, not href, meaning other style rules for buttons may have interfered.

Upvotes: 1

Related Questions