CODEWITHSUNDEEP
cssionic-frameworkionic3
core114
core114

Reputation: 5335

Ionic-3 Avatar can't center

I am created Ionic 3 Avatar, and Im try to make it center but its cant center, I don't know why can't this center, please help me to fix this Look my attached image, Look at this image

html

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

css

.avatars{
   margin: auto;
}

Upvotes: 0

Views: 2960

Answers (3)

Alon Laniado
Alon Laniado

Reputation: 848

Last answers were incomplete.

an inline example:

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

the 'display:block;' will let you center the image. setting size in % will allow you to set the margin correctly.

result: centered image in an ion-avatar

Upvotes: 0

Elyas Behroozizade
Elyas Behroozizade

Reputation: 292

here the way to make something to be in center:

.main {
  width : 100%;
  background-color : #000;
}
#element {
  background-color : #F00;
  width : 50px;
  height : 50px;
}
.center {
  margin : 0 auto;
}
<html>
<head></head>
<body>
<div class="main">
  <div id="element" class="center"></div>
</div>
</body>
</html>

Upvotes: 2

Shubham
Shubham

Reputation: 539

Just give the .avatars class to img tag or use this css

.avatars img{
    margin: auto;
}

Upvotes: 2

Related Questions