How to center ion side menu images/text

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>

How would I center the image and text without using CSS? I'm trying to get the circular image and the text below it to center in the black. I've tried a lot of things and didn't get results.

Answer 1

You haven't provided any css so I can only give you my option.

I would customize the <ion-header-bar> inside <ion-side-menu> this way:

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

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

the final result can be seen here.

Answer 2

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