图像未在 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。假设 flex 方向是 row，这应该将项目对齐到它们的垂直中心。