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

Question

我想中央对齐文本的ion-list里面的物品，使用使用text-align: center下面的CSS代码中的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，这意味着按钮的其他样式规则可能会受到干扰。