Image not align in a flex row

Question

I have the following row in a mat-card-header:

<div fxLayout="row" fxLayoutGap="20px" fxFlex="1 1 100%">
        <div fxLayoutAlign="start" fxFlex="1 1 60%" >
          <h1 class="mat-title" color="accent">{{model.get_price()}}</h1>
        </div> 
        <div fxLayoutAlign="end" fxFlex="1 1 40%"><img mat-card-image class="card_cover_logo" src="{{model.image_path}}"></div> 
</div>

The result is the following:

The price and the image are not aligned. The image is higher than the text. Is there any flex directive to adjust that?

ah i guess you need to make them both start or end `fxLayoutAlign="end"` actually they are different — Temani Afif, Feb 07 '18 at 20:32
start and end have a different meaning, I want to align them vertically not horizontally — Kerby82, Feb 07 '18 at 23:10

Yathi · Answer 1 · 2018-02-08T16:43:22.673

0

You should add a align-items: center on the parent element. Assuming the flex direction is row, this should align the items to their vertical center.

edited Feb 08 '18 at 16:43

answered Feb 07 '18 at 20:30

Yathi

1,011
1
12
21

Image not align in a flex row

1 Answers1