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

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-side-menu>里面的<ion-header-bar> ：

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

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

Answer 2

对于> ionic2

<ion-card text-center class="hide-card">
    <img src="http://placehold.it/300x200" class="custom-avatar"/>
    <h2>Victorcodex</h2>
    <p>Have some p tag here</p>
    <p>I am the third guy inline here</p>
    <hr>
</ion-card>

.hide-card {
  -webkit-box-shadow: none!important;
}

.custom-avatar {
  height: 30vw;
  width: 30vw;
  border: 1px solid #fff;
  border-radius: 50%;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

Answer 3

如果它只是使您想要的文本和图像居中，那么您可以使用HTML标记，特别是如果CSS text-align：center; 不起作用。 通常，它对我不起作用，我使用了标签。