el-row中元素如何上下居中对齐？

el-row中元素如何上下居中对齐

在element-plus中，您可以使用align属性来实现el-row中元素的上下居中对齐。

以下是一些常见的align属性取值，可以用来实现不同的布局方式：

• top: 元素顶部对齐
• middle: 元素垂直居中对齐
• bottom: 元素底部对齐
  您可以通过在el-row组件上添加align属性并设置相应的值来实现上述的不同的上下居中对齐方式。

例如:

<template>
  <el-row :gutter="20" align="middle">
    <el-col :span="12"><div style="height: 100px; background-color: #f0f0f0;">内容1</div></el-col>
    <el-col :span="12"><div style="height: 150px; background-color: #e0e0e0;">内容2</div></el-col>
  </el-row>
</template>

在上面的示例中，通过在el-row组件上添加align="middle"属性，实现了el-row中的el-col元素的垂直居中对齐。