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

投掷者

---

如果不使用CSS，如何将图像和文本居中？我试图让圆形图像和它下面的文本以黑色居中。我尝试了很多方法，但都没有得到结果。

如果只是为了将所需的文本和图像居中，那么可以使用HTML标记，尤其是CSS文本align:center；不起作用。通常，它对我不起作用，我使用了标签。

您没有提供任何

css

，因此我只能给您我的选择

我将通过以下方式自定义

内部的

：

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

可以看到最终结果。

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

胜利者法典
这里有一些p标签

我是这里的第三个人


.隐藏卡片{
-网络工具包盒阴影：无！重要；
}
.定制化身{
高度：30vw；
宽度：30vw；
边框：1px实心#fff；
边界半径：50%；
显示：内联块；
左边距：自动；
右边距：自动；
}

您有机会了解我的答案吗？如有任何反馈，将不胜感激。干杯。嘿，左撇子，你的解决方案太复杂了，不适合这么简单的事情。我不想为此实现这么多css。这个问题是在我为一场黑客大赛工作时提出的。我问过我附近的人，为了简单起见，他们使用inspect元素通过像素来修改它的确切位置。我用这行代码给它一个固定的位置：Lefty-这是一个很好的解决方案，但我想知道在ion标题栏中完成所有这些是否有任何好处。我刚刚摆脱了它，在列表的顶部的离子内容部分放了一张中间有一些填充的图片。看起来容易多了。想法？@7200rpm：如果你提供一个plunker，我可以比较一下。干杯

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

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