el-col 内容居中
时间: 2024-08-12 07:10:28 浏览: 142
Element-UI 使用el-row 分栏布局的教程
`el-col` 是 Element UI 中的一个组件,用于创建栅格布局。在 Element UI 的表格、卡片等布局中,你可以使用 `el-col` 组件来定义列宽,并实现内容的水平居中。要使 `el-col` 内的内容居中,你可以使用 CSS 或者组件提供的内置样式来实现。
1. 使用 CSS(推荐方法):
在你的样式表或组件样式中,为 `el-col` 容器添加一个 `.center` 类,然后应用 `text-align: center;` 属性:
```css
.center {
text-align: center;
}
```
在 HTML 上添加这个类:
```html
<el-col :class="['col-6', 'center']">
<!-- Your content here -->
</el-col>
```
2. 如果你想在 `el-col` 组件内直接设置,可以使用 `el-col` 的 `offset` 和 `span` 属性来配合:
```html
<el-col :offset="2" :span="8" class="center">
<!-- Your content here -->
</el-col>
```
这里 `offset=2` 表示从左侧留出 2 个列宽的空间,`span=8` 表示占据 8 个列宽,内容自然就会在剩下的列宽内居中。
阅读全文