CODEWITHSUNDEEP
cssangulartypescriptsassionic3
Camilo Soto
Camilo Soto

Reputation: 559

How can I center an avatar in ionic 3?

How can I center an ion-avatar horizontally like in this picture?

Or how can I add a centered image to a ion-row and add an avatar style to the image?

centered avatar

Upvotes: 0

Views: 3037

Answers (1)

JGFMK
JGFMK

Reputation: 8904

I believe there is a CSS Utility attribute you can use called text-center. Apply that to a div, that wraps your image. text-center on the div would resolve to the CSS

div { text-align: center!important; } Style it with a class or id, if you've got many in your markup.

You might want to also apply something like this to the image to style it..

#imgwrap {
min-width:200px;
min-height:150px;
background-color:blue;
text-align: center!important;
  img {
  border:0;
  max-width:140px;
  border-radius:50%;
  }  
}
<div class"split-pane">
<div id="imgwrap">
  <img src="http://via.placeholder.com/150x150">
</div>
</div>

CSS Tricks has some content if you want run into issues with border radius and images.

Upvotes: 1

Related Questions