Question

我被创建了Ionic 3 Avatar，我试图让它成为中心但是它不能中心，我不知道为什么不能这个中心，请帮我解决这个问题看看我的附图，

HTML

<ion-content padding>
  <ion-avatar class="avatars" >
    <img src="assets/imgs/pro-img.png">
  </ion-avatar>
</ion-content>

CSS

.avatars{
   margin: auto;
}

Answer 1

这里是让一些事物处于中心位置的方式：

＆＃13;

.main {
  width : 100%;
  background-color : #000;
}
#element {
  background-color : #F00;
  width : 50px;
  height : 50px;
}
.center {
  margin : 0 auto;
}

＆＃13;

<html>
<head></head>
<body>
<div class="main">
  <div id="element" class="center"></div>
</div>
</body>
</html>

＆＃13;

Answer 2

只需将.avatars课程提供给img代码或使用此css

即可

.avatars img{
    margin: auto;
}

Answer 3

最后一个答案不完整。

内联示例：

    <ion-avatar slot="start" style="background-color: #00212E;">
        <img src="../../assets/icon/transfer.svg" style="height: 70%; width: 70%; margin: 15% auto; display:block">
    </ion-avatar>

“ display：block;”将使您居中图像。以％设置大小将允许您正确设置边距。

结果： centered image in an ion-avatar

Ionic-3 Avatar无法居中

3 个答案: