angular - 图像未在 flex 行中对齐

Question

我在 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>

结果如下：

价格和图片不一致。图片高于文字。是否有任何 flex 指令来调整它？

Answer 1

您应该align-items: center在父元素上添加一个。假设弯曲方向是行，这应该将项目与其垂直中心对齐。