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

Question

Ionic 4:

I have an image and a label in tag and I want both of them to appear in the center and side by side.

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>

Sass

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

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

Present condition: Right now, only the label appears in the center, while the image appears on the extreme left. How can I align both of them in the center and side by side?

What I tried? I added div tag around image and added text-center to it, but still the image does not appear in the center. Moreover, I tried align-content: center in class of image tag and still it does not work.

Code Pen: https://codepen.io/anon/pen/RdjQKr?editors=1111

Any solutions?

Answer 1

Marium what is happening is that your ion-label is by default a flex child with flex:1; which makes it stretch to all the space it gets pushing the image to the side just like any block level element would. What you need to do is pass your image tag inside the ion-label so that it acts as a part of that block, then your text-align center can do the rest of the work. If further modification is needed you can make ion-label a flex parent and justify/align using flex properties. The issue of breaking on mobile devices can be resolved by using flex-wrap: nowrap; I hope it helps!

Answer 2

I would try making the wrapper a flexbox wrapper:

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

The display: flex rule makes the wrapper into a flex container and the child elements flex items. align-items affects the vertical alignment, and justify-content affects the horizontal alignment.

Then add this to the title CSS:

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

The flex shorthand says flex-grow: 0 flex-shrink: 0 and initial width auto based on content.

Great article on all things flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/