How to position icon on the right side of ion-card-header?

Question

This question may be a little stupid but I am not that familiar with CSS and googling the problem didnt get the desired result.

So I have this ion-card-header:

This is the code:


      {{enActivity.customer}}
      {{enActivity.startTime | date :'HH:mm'}}
      Aktivitäten: {{enActivity.activities.length}}

I would like to place the last item, the ion-icon on the right sideof the card-header. How do I achieve this? I am a little confused.

In the picture, I would like to place the icon in the marked position.

This is what I have tried so far

ion-icon {
  float: right;
}

user_11520496 · Answer

Try this:


  {{enActivity.customer}}
  {{enActivity.startTime | date :'HH:mm'}}
  Aktivitäten: {{enActivity.activities.length}}

ion-card-header { position: relative }
.center-right{
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
}

user_14378689 · Answer

.ion-card{
Flex-direction: column;
}

ion-icon{
Margin:10px;
 }

user_14294298 · Answer

Separate the content and the icon into two Sections or Div's and use display flex

.ion-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
     }

user_11868566 · Answer

Try this

ion-card-header { position: relative }

ion-icon{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0,-50%);
}

user_13642267 · Answer

 
      {{enActivity.customer}}
      {{enActivity.startTime | date :'HH:mm'}}
      Aktivitäten: {{enActivity.activities.length}}

       


 hope this will work

How to position icon on the right side of ion-card-header?

5 Answers