Html 如何在离子项目中将离子标签和离子img并排对齐

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

现状： 现在，只有标签显示在中心，而图像显示在最左边。我如何使它们在中心和并排对齐

我尝试了什么？ 我在图像周围添加了div标记，并在其上添加了文本中心，但图像仍然不显示在中心。此外，我还尝试了对齐内容：在图像标记类中居中，但仍然不起作用

代码笔：

---

有什么解决方案吗？

我会尝试将包装器制作成flexbox包装器：

.input-wrapper {
  display: flex;
  align-items: center;
  justify-content: center; 
}

display:flex

规则将包装器放入flex容器和子元素flex项中<代码>对齐项目影响垂直对齐，

对齐内容

影响水平对齐

然后将其添加到标题CSS中：

.header-text {
  flex: 0 0 auto;
}

flex速记表示基于内容的

flex增长：0

flex收缩：0

和初始宽度

auto

---

关于AllThingsFlexBox的伟大文章：

Marium发生的事情是，默认情况下，您的离子标签是flex:1的flex子标签；这使得它可以伸展到它得到的所有空间，就像任何块级元素一样，将图像推到一边。您需要做的是将图像标记传递到离子标签中，使其成为该块的一部分，然后您的文本对齐中心可以完成其余工作。如果需要进一步修改，您可以将ion标签设置为flex父项，并使用flex属性对正/对齐。使用flex-wrap可以解决移动设备上的中断问题：nowrap；

---

我希望有帮助

还是一样：|你能贴一把小提琴或钢笔吗？在问题中加上它。。。这真的很有帮助。我上面的编辑现在应该可以为你工作了。我根据你的css做了更改，它位于最左边，但仍然没有显示在中间。我已将更改保存在相应打开的代码中。也许，你可以拥有很多。

.header-text {
  flex: 0 0 auto;
}