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

Question

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

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

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

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

有什么解决办法吗？

Answer 1

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

Answer 2

我会尝试使包装器成为 flexbox 包装器：

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

display: flex 规则使包装器成为弹性容器，子元素成为弹性项目。 align-items 影响垂直对齐，justify-content 影响水平对齐。

然后将这个添加到标题 CSS 中：

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

flex 简写为 flex-grow: 0 flex-shrink: 0 和初始宽度 auto 基于内容。

关于 flexbox 的所有内容的精彩文章：https://css-tricks.com/snippets/css/a-guide-to-flexbox/