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

Question

<EditText
 android:id="@+id/edtPassword"
 android:layout_width="fill_parent"
 android:layout_height="42dp"
 android:layout_marginTop="16dp"
 android:hint="Password"
 android:inputType="textPassword"
 android:padding="5dip"
 android:singleLine="true"
 android:textColor="#363435"
 android:textSize="14sp" />

如何在不使用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;
}

最终结果可见here。

Answer 2

对于＆gt; 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;不起作用。通常，它对我没有用，我使用了标签。