Vue button centered

Table of contents

1. Center the button

2. Button right

3. The button is on the left

1. Method 1

2. Method 2

---

1. Center the button

In Vue, if you need to center the button, you can use the property `text-align: center` in CSS.

For example, you can add `text-align: center` style to the container element where the button is located:

<template>
  <div class="button-container">
    <el-button type="primary">提交</el-button>
    <el-button>取消</el-button>
  </div>
</template>

<style>
.button-container {
  text-align: center;
}
</style>

In the above code, we added the `text-align: center` style to the container element where the button is located to realize the centered display of the button.

Alternatively, you can use flex layouts to achieve this. For example, set the container element where the button is located as a flex container, and use the `justify-content: center` attribute to achieve horizontal centering. An example is as follows: ```vue

<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>

In the above code, we set the container element where the button is located as a flex container, and use `justify-content: center` attribute to achieve horizontal centering.

2. Button right

In Vue, you can use  flex layout to achieve the effect of button right. Specific steps are as follows:

Add a style to the parent element of the button  display: flex; justify-content: flex-end; to align the child elements to the right along the horizontal axis.

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

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

Add a style to the button  margin-left to control the distance between the button and its left sibling.

<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; /* 调整按钮与左边元素之间的距离 */
}

This aligns the button to the right. display: flex; justify-content: flex-end; If you have multiple elements that need to be aligned to the right, you just need to wrap them in a parent element and apply styles to the parent element  .

3. The button is on the left

1. Method 1

In Vue, you can use  flex layout to achieve the effect of button left. Specific steps are as follows:

1. Add styles on the button parent element  display: flex; , enabling  flex layout.

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

.button-wrapper {
  display: flex;
}

1. Add a style to the button  margin-right to control the distance between the button and its right sibling.

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

.button-wrapper {
  display: flex;
}

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

This will align the button to the left. If you have multiple elements that need to be left-aligned, just wrap them in a parent element and apply styles to the parent element  display: flex; . When using  flex layout, the position of elements  order is controlled by attributes, and the position of child elements is determined by the order in which they appear in the parent element, so the front element will appear in the left position. If you need to adjust the position of an element, you only need to add attributes to its style  order .

2. Method 2

In Vue, you can  float: left; achieve the button left effect by adding styles to the button element. Specific steps are as follows:

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

.button-container {
  overflow: auto; /* 避免浮动元素对父元素的影响 */
}

.left-btn {
  float: left;
}

This will align the button to the left. If there are other elements in the parent element of the button element, in order to prevent the button from affecting the layout of other elements, you can add a  overflow: auto; style to the parent element so that it contains the layout context of the floating element, so as to avoid affecting other elements.

Please like it if it is useful, and develop a good habit!

Please leave a message for questions, exchanges, and encouragement!