el-col 垂直居中
时间: 2023-09-26 11:04:50 浏览: 131
可以使用 flex 布局实现 el-col 的垂直居中,具体方法如下:
1. 在 el-row 上设置 align-items: center; 实现 el-col 的垂直居中。
2. 在 el-col 上设置 display: flex; justify-content: center; 实现 el-col 内元素的水平居中。
相关问题
el-col 文字水平垂直居中
要让 el-col 中的文字水平垂直居中,可以使用 flex 布局和 align-items、justify-content 属性来实现。具体的做法如下:
```html
<template>
<div class="container">
<el-row>
<el-col :span="24" class="text-center">
<div class="centered">
<h1>这是一个居中的标题</h1>
<p>这是一段居中的文本</p>
</div>
</el-col>
</el-row>
</div>
</template>
<style scoped>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.centered {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
</style>
```
上面的代码中,我们首先给最外层的容器设置了 display: flex 和 align-items: center、justify-content: center 属性,让它能够水平垂直居中。然后在 el-col 中再嵌套一个 div 容器,给它设置了 display: flex 和 flex-direction: column 属性,让它能够垂直居中。最后,在 div 容器中的文本元素上设置了 text-align: center 属性,让文本能够水平居中。这样就可以实现 el-col 中的文字水平垂直居中了。
el-col居中style
el-col是Element UI中的一个组件,用于创建栅格布局。要使el-col居中,可以通过设置样式来实现。
一种常见的方法是使用flex布局。可以在el-col上添加一个class,例如"centered",然后在CSS中定义该class的样式为居中对齐。
示例代码如下:
HTML:
```html
<el-row>
<el-col :span="12" class="centered">
<!-- 内容 -->
</el-col>
</el-row>
```
CSS:
```css
.centered {
display: flex;
justify-content: center;
align-items: center;
}
```
这样设置后,el-col中的内容将在水平和垂直方向上居中对齐。