Vue 按钮居中、按钮居左、按钮居右的实现代码

<template>
  <div class="button-container">
    <el-button type="primary">提交</el-button>
    <el-button>取消</el-button>
  </div>
</template>
 
<style>
.button-container {
  text-align: center;
}
</style>

<template>
  <div class="button-container">
    <el-button type="primary">提交</el-button>
    <el-button>取消</el-button>
  </div>
</template>
 
<style>
.button-container {
  display: flex;
  justify-content: center;
}
</style>

<div class="button-wrapper">
  <button>按钮</button>
</div>

.button-wrapper {
  display: flex;
  justify-content: flex-end;
}

<div class="button-wrapper">
  <span>左边的元素</span>
  <button class="right-btn">按钮</button>
</div>

.button-wrapper {
  display: flex;
  justify-content: flex-end;
}
.right-btn {
  margin-left: 10px; /* 调整按钮与左边元素之间的距离 */
}

<div class="button-wrapper">
  <button class="left-btn">按钮</button>
</div>

.button-wrapper {
  display: flex;
}

<div class="button-wrapper">
  <button class="left-btn">按钮</button>
  <span>右边的元素</span>
</div>

.button-wrapper {
  display: flex;
}
.left-btn {
  margin-right: 10px; /* 调整按钮与右边的元素之间的距离 */
}

<div class="button-container">
  <button class="left-btn">按钮</button>
</div>