图像未在弹性行中对齐

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。假设弯曲方向为行，则应将项目与其垂直中心对齐。