elementui 居中显示 el-card
时间: 2023-08-08 22:14:08 浏览: 455
要让 ElementUI 的 `el-card` 居中显示,可以使用 flex 布局来实现。你可以在包含 `el-card` 的父元素上应用以下 CSS 样式:
``` css
display: flex;
justify-content: center;
align-items: center;
```
这样就可以让 `el-card` 元素居中显示了。如果你只想让 `el-card` 水平居中,可以将 `justify-content` 属性设置为 `center`。如果你只想让 `el-card` 垂直居中,可以将 `align-items` 属性设置为 `center`。
相关问题
vue el-card居中
要使el-card居中,可以使用flex布局。具体方法如下:
```html
<template>
<div class="card-container">
<el-card>
<el-row justify="center">
<el-col :span="10">
<el-input></el-input>
</el-col>
</el-row>
</el-card>
</div>
</template>
<style>
.card-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
```
在上面的代码中,我们使用了一个名为“card-container”的div来包含el-card。我们将其设置为flex布局,并使用justify-content和align-items属性将其水平和垂直居中。在el-card中,我们使用了一个el-row来包含el-input,并将其设置为居中对齐。这样,整个el-card就会居中显示了。
el-card body水平垂直居中
要实现 el-card body 水平垂直居中,可以通过以下步骤进行操作:
1. 在 el-card 的外层包裹一个父容器,例如一个 div 元素,给该父容器设置以下 CSS 样式:
```css
.container {
display: flex;
justify-content: center;
align-items: center;
}
```
这将使父容器成为一个 flex 容器,并将其子元素水平和垂直居中。
2. 将 el-card 放置在父容器内,如下所示:
```html
<div class="container">
<el-card>
<!-- card content -->
</el-card>
</div>
```
通过这种方式,el-card 的 body 内容将在父容器中水平垂直居中显示。你可以根据需要调整父容器的样式以适配你的设计。