html - 如何在 ion-item 中并排对齐 ion-label 和 ion-img

Question

ionic 4:

我在标签中有一张图片和一个标签，我希望它们并排出现在中央。

HTML:

 <ion-item lines="none" [color]="'#F1F9FF'" class='all'>
            <ion-img [class]="'vehicle-img'"
                [src]="'./assets/icons/enem.png'">
            </ion-img>
            &nbsp;
            <ion-label text-center text-wrap class='header-text'>This is my heading
            </ion-label>   
        </ion-item>

萨斯

.vehicle-img
  height: 80px
  width: 80px

.header-text
  font-size: 18px;
  font-style: roboto medium

现状:现在，只有标 checkout 现在中间，而图像出现在最左边。如何将它们并排居中对齐？

我尝试了什么？我在图像周围添加了 div 标签并向其添加了文本中心，但图像仍然没有出现在中心。此外，我尝试了 align-content: center in class of image tag 但它仍然不起作用。

代码笔: https://codepen.io/anon/pen/RdjQKr?editors=1111

有什么解决办法吗？

Answer 1

Marium 发生的事情是你的 ion-label 默认是一个 flex:1 的 flex child;这使得它延伸到它得到的所有空间，就像任何 block 级元素一样将图像推到一边。你需要做的是将你的图像标签传递到 ion-label 中，使其成为该 block 的一部分，然后你的文本对齐中心可以完成剩下的工作。如果需要进一步修改，您可以使 ion-label 成为 flex parent 并使用 flex 属性调整/对齐。移动设备上的断线问题可以通过使用 flex-wrap:nowrap 来解决；希望对您有所帮助!