el-steps 设置了align-center为什么还同时改变了el-steps的宽度

当你将 `align-center` 应用于 `el-steps` 组件时，它会将每个步骤居中对齐。但是，如果在 `el-steps` 组件的父级容器中设置了一个固定的宽度，那么 `el-steps` 组件的宽度也会受到这个父级容器的宽度限制。因此，即使你将 `el-steps` 中的步骤居中对齐，但容器的宽度限制会影响 `el-steps` 的宽度。如果你想要 `el-steps` 组件的宽度不受父级容器的限制，你可以将宽度设置为 `100%`。

相关问题

el-steps插入html

el-steps是一个Element UI组件，用于创建步骤条。你可以使用el-steps组件来插入HTML内容，包括自定义描述。下面是一个示例代码，演示了如何在el-steps中插入HTML内容：

<el-steps :active="6" finish-status="success" align-center>
  <el-step v-for="(item,index) in paymentRecord" :key="index" title="缴费记录">
    <template slot="description">
      <p>缴费时间:{{item.payTime}}</p>
      <p>缴费方式：{{item.paymentMethod}}</p>
      <p>缴费金额：{{item.payMoney}}</p>
      <p>交易码：{{item.qrCode}}</p>
      <p>收款编号：{{item.paymentNumber}}</p>
    </template>
  </el-step>
</el-steps>

在上面的代码中，我们使用了el-step组件的description插槽来插入自定义描述。在description插槽中，我们可以使用HTML标签来格式化描述内容。在这个例子中，我们使用了`<p>`标签来创建段落。

请注意，上述代码中的paymentRecord是一个后台获取的数组，用于渲染el-step组件。你可以根据自己的需求修改和调整代码。

el-steps 竖向

如果您想要将 `el-steps` 组件显示为竖向的步骤条，可以设置 `direction` 属性为 `"vertical"`。同时，您可以通过样式来调整步骤条的宽度和高度，以及步骤内容的对齐方式。

以下是示例代码：

<template>
  <el-steps :active="activeStep" space="100px" direction="vertical" style="height: 300px;">
    <el-step v-for="(item, index) in steps" :key="index">
      {{ item.content }}
    </el-step>
  </el-steps>
</template>

<script>
export default {
  data() {
    return {
      activeStep: 0,
      steps: [
        {
          content: '这里是步骤 1 的内容',
        },
        {
          content: '这里是步骤 2 的内容',
        },
        {
          content: '这里是步骤 3 的内容',
        },
      ],
    };
  },
};
</script>

<style>
.el-step {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

在上面的代码中，我们将 `el-steps` 组件的 `direction` 属性设置为 `"vertical"`，并使用 `style` 属性来设置步骤条的高度为 `300px`。在样式中，我们使用了 `display: flex` 和 `align-items: center` 来让步骤内容垂直居中，使用了 `justify-content: center` 来水平居中步骤内容。同时，我们也设置了每个步骤的高度为 `100px`，可以根据实际情况进行调整。