html - ionic : Unable to align the text of ion-list items

Question

我试图在 ion-list 元素中居中对齐文本，使用文本对齐，在以下 css 代码中使用 text-align: center:

.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 或右键单击 -> 最后一个选项)检查此特定菜单应用了哪些额外的样式规则。值得注意的是，Login 按钮是一个button，而不是href，这意味着按钮的其他样式规则可能会受到干扰。