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

Question

我正在尝试将文本集中在ion-list项内，使用以下css代码中的text-align: center使用text-align：

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

非常感谢任何帮助。

Answer 1

在开发人员工具（F12或右键单击 - >最后一个选项）的帮助下，检查此特定菜单应用了哪些其他样式规则。值得注意的是，登录按钮是按钮，而不是 href ，这意味着按钮的其他样式规则可能会受到干扰。