如何使离子侧菜单图像/文本居中

Question

 <ion-nav-back-button class="no-text">
            </ion-nav-back-button>
            <ion-nav-buttons side="right">
                <button class="button button-icon button-clear ion-android-more-vertical" menu-toggle="right">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="fabContent"></ion-nav-view>
        <ion-nav-view name="menuContent" ng-class="{expanded: isExpanded}" ></ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="right">
        <ion-header-bar class="dark-bg expanded">
           <span class="avatar" style="background: url('img/crown.jpg'); background-size: cover; "></span> 
            <h2>Thronester</h2>
        </ion-header-bar>

如何在不使用CSS的情况下将图像和文本居中？我试图让圆形图像和它下面的文字以黑色为中心.我尝试过很多东西但没有得到结果.

Answer 1

你没有提供任何,css所以我只能给你我的选择.

我会以这种方式自定义<ion-header-bar>内部<ion-side-menu>:

<ion-header-bar class="bar-profile">
    <div class="profile">
        <img class="profile-picture" src="http://ionicframework.com/img/docs/mcfly.jpg" />
        <h3 class="name">Thronester</h3>
    </div>
</ion-header-bar>

使用这个css:

.bar.bar-profile {
    background-color: #444;
    height: 170px;
}

.bar .profile {
    top: 0;
    right: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    padding-top: 15px;
}

.profile .name {
    color: #FFFFFF;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.profile-picture {
    border-radius: 50%;
}

.menu .has-header
{
    top: 169px;
}

最后的结果可以在这里看到.