Html 离子：无法对齐离子列表项的文本

我正在尝试将

离子列表

项中的文本居中对齐，在以下css代码中使用

文本对齐：居中对齐文本：

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

但我不知道为什么我要把第一项（登录项）放在其他项的中心位置，下面是屏幕截图：


这是我用过的HTML代码：

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


我的全名
登录
搜寻
浏览
播放列表

任何帮助都将不胜感激。
在开发者工具的帮助下（F12或右键单击->最后一个选项），检查此特定菜单应用了哪些其他样式规则。值得注意的是，登录按钮是一个按钮，而不是href，这意味着按钮的其他样式规则可能会产生干扰。
是的，这是个错误。谢谢你的回答！