将el-card放在页面中间怎么设置
时间: 2024-01-07 19:03:11 浏览: 201
可以使用CSS的flex布局来将el-card放在页面中间,具体的实现方法如下:
HTML代码:
```
<div class="container">
<el-card>
<!-- el-card的内容 -->
</el-card>
</div>
```
CSS代码:
```
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 100vh; /* 设置容器高度为视口高度 */
}
```
这样就可以将el-card放在页面的中间了。注意,这种方式需要将el-card的外层容器设置为flex布局,且需要设置容器的高度为视口高度,否则可能无法实现居中效果。
相关问题
怎么把一个el-card放在另一el-card的右面
您可以使用 flex 布局来实现将一个 el-card 放在另一个 el-card 的右侧。具体来说,您可以将这两个 el-card 放在一个 div 容器中,并将该容器的 display 属性设置为 flex,然后将第一个 el-card 的宽度设置为固定值,将第二个 el-card 的 flex 属性设置为 1,如下所示:
```
<div style="display: flex;">
<el-card style="width: 200px;"></el-card>
<el-card style="flex: 1;"></el-card>
</div>
```
这将使第一个 el-card 的宽度为 200px,第二个 el-card 将填充剩余的空间并位于第一个 el-card 的右侧。您可以根据需要调整宽度和样式。
怎么把一个el-card放在另一el-card的右面,在把另外一个el-card放在它的下边,一共三个card
你可以使用`el-row`和`el-col`来实现这个布局,具体代码如下:
```html
<template>
<el-card>
<el-row>
<el-col :span="16">
<el-card>
第一个card
</el-card>
</el-col>
<el-col :span="8">
<el-card>
<el-row>
<el-col :span="24">
<el-card>
第二个card
</el-card>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-card>
第三个card
</el-card>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
</el-card>
</template>
```
在这个例子中,我们使用了一个父`el-card`包含两个子`el-card`,第一个子`el-card`占据了父`el-card`的16列,第二个子`el-card`占据了父`el-card`的8列,然后在第二个子`el-card`中使用了两个`el-row`和两个`el-col`来实现第二和第三个card的布局。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)