【Vue】居中居左居右样式总结

慕白Lee

已于 2023-12-09 16:33:49 修改

阅读量2.9w

点赞数 11

分类专栏： # Vue 文章标签： vue.js javascript ecmascript

于 2023-06-13 16:17:02 首次发布

本文链接：https://blog.csdn.net/libusi001/article/details/131190923

版权

Vue 专栏收录该内容

22 篇文章

订阅专栏

文章介绍了在Vue环境中使用CSS进行按钮布局的方法，包括使用text-align属性、Flex布局和float属性来实现按钮的居中、居右和居左显示。详细讲述了每种方法的代码示例和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按钮居中

在 Vue 中，如果需要将按钮居中显示，可以使用 CSS 中的 `text-align: center` 属性来实现。

例如，可以在按钮所在的容器元素上添加 `text-align: center` 样式：

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

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

上面的代码中，我们在按钮所在的容器元素上添加了 `text-align: center` 样式，来实现按钮居中显示。

另外，还可以使用 Flex 布局来实现。例如，将按钮所在的容器元素设置为 Flex 容器，并使用 `justify-content: center` 属性来实现水平居中显示。示例如下：```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>

上面的代码中，我们将按钮所在的容器元素设置为 Flex 容器，并使用 `justify-content: center` 属性来实现水平居中显示。

按钮居右

在 Vue 中，可以使用 flex 布局来实现按钮居右的效果。具体步骤如下：

在按钮父元素上添加 display: flex; justify-content: flex-end; 样式，将子元素沿着横轴方向向右对齐。

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

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

在按钮上添加 margin-left 样式，控制按钮与其左边兄弟元素之间的距离。

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

这样就可以将按钮居右了。如果有多个元素需要靠右对齐，只需要将它们包裹在一个父元素中，并且在父元素上应用 display: flex; justify-content: flex-end; 样式即可。

按钮居左

方法1

在 Vue 中，可以使用 flex 布局来实现按钮居左的效果。具体步骤如下：

在按钮父元素上添加 display: flex; 样式，启用 flex 布局。

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

.button-wrapper {
  display: flex;
}

在按钮上添加 margin-right 样式，控制按钮与其右边兄弟元素之间的距离。

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

.button-wrapper {
  display: flex;
}

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

这样就可以将按钮居左了。如果有多个元素需要靠左对齐，只需要将它们包裹在一个父元素中，并且在父元素上应用 display: flex; 样式即可。使用 flex 布局时，元素的位置由 order 属性控制，而子元素的位置是由它们在父元素中出现的顺序决定的，因此靠前的元素会出现在靠左的位置。如果需要调整元素的位置，只需要在它的样式中添加 order 属性即可。

方法2

在 Vue 中，可以通过给按钮元素添加 float: left; 样式来实现按钮居左的效果。具体步骤如下：

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

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

.left-btn {
  float: left;
}

这样就可以将按钮居左了。如果按钮元素的父元素中还有其它元素，为避免按钮影响其他元素的布局，可以在父元素上添加 overflow: auto; 样式，使其包含浮动元素的布局上下文，从而避免对其它元素造成影响。

同一行部分居左部分居右

<el-row style="display: flex">
  <el-col style="display: flex">
    <el-button type="primary" size="mini" @click="demo">新增</el-button>
    <el-button size="mini">导入</el-button>
  </el-col>
  <el-col style="text-align: right">
    <el-button type="primary" size="mini" @click="demo">导出</el-button>
  </el-col>
</el-row>

表格总结CSS以及组合效果

整理角度

CSS居左、居中、居右的方法、优先级和组合效果时，我们可以从以下几个角度来展开：

CSS属性：涉及到的CSS属性，如text-align, justify-content, float, margin, 等。
布局方法：使用这些属性的不同布局方法，如Flexbox、Grid、Block等。
优先级：CSS属性的相互覆盖规则和优先级。
组合效果：结合多个属性来实现更复杂的布局效果。
代码示例：简单的代码片段来展示如何使用这些属性。

表格整理

以下是一个表格，总结了居左、居中、居右的不同CSS方法，它们的优先级，以及组合效果的简单代码示例：

布局方法	CSS属性	功能	优先级	组合效果	代码示例
文本对齐	`text-align: center;`	居中对齐内联内容或块级容器内的行内内容	低	不能与float直接组合	`<div style="text-align: center;">Button</div>`
Flexbox	`justify-content: center;`	在Flex容器中水平居中子元素	中	可以与`align-items`等属性组合实现垂直和水平居中	`<div style="display: flex; justify-content: center;">Button</div>`
Flexbox	`justify-content: flex-end;`	在Flex容器中水平居右子元素	中	可以与`align-items`组合实现垂直对齐	`<div style="display: flex; justify-content: flex-end;">Button</div>`
Flexbox	`justify-content: flex-start;`	在Flex容器中水平居左子元素	中	可以与`margin-right`组合控制间距	`<div style="display: flex; justify-content: flex-start;">Button</div>`
浮动布局	`float: left;`	元素向左浮动	高	可以与`clear`组合避免元素相互覆盖	`<div style="float: left;">Button</div>`
浮动布局	`float: right;`	元素向右浮动	高	可以与`clear`组合避免元素相互覆盖	`<div style="float: right;">Button</div>`
外边距	`margin: auto;`	在块级元素中，如果左右边距都是auto，元素将水平居中	中	可以与定宽组合实现居中	`<div style="margin: auto; width: 50%;">Button</div>`
Grid布局	`place-items: center;`	在Grid容器中水平和垂直居中子元素	中	可以与`grid-template-columns`等属性组合实现精细布局	`<div style="display: grid; place-items: center;">Button</div>`