html - 如何将图像放在离子标签的右侧？

Question

我想在离子标签的右侧放置一个彩色的 whats-app 图像，但我不知道怎么做。这是我的代码：

<ion-row>
   <ion-col size="10">
     <ion-label position="floating">Contato 1* </ion-label>
   </ion-col>
   <ion-col size="2">
     <ion-img class="whatsapp"></ion-img>
   </ion-col>
</ion-row>

CSS：

.whatsapp {
  height: 20px;
  width: 20px;
  background-image: url("../../assets/whatsapp.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom left;
  }

PS：使用ion-img [src]="assets/whatsapp" /ion-img无效！

我做了@Carlos Del Cura Pascual 告诉我的事情，现在我明白了。这几乎是好的。

Answer 1

尝试使用 flexbox 对齐内联项目。→ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

避免使用 float 或类似的

    ion-row{
      display:flex;
      flex-direction:row;
      justify-content:space-around;
      align-items:center;
      height: /* necessary to give a height to align vertically */
    }