vue el-row组件里面的组件在el-row垂直居中
时间: 2023-11-13 10:06:02 浏览: 58
你可以在el-row组件上设置`align`属性的值为`middle`,这样它的子组件就会在垂直方向上居中对齐了。例如:
```html
<el-row align="middle">
<el-col :span="12">
<!-- 这里放置你要垂直居中的内容 -->
</el-col>
</el-row>
```
在这个例子中,`el-col`组件会被垂直居中对齐,因为它是`el-row`的子组件。你也可以将`align`属性的值设置为`top`或`bottom`来改变子组件在垂直方向上的对齐方式。
相关问题
vue el-row组件里面的组件在el-row水平居中
要让`el-row`组件里面的子组件水平居中,可以使用flex布局,具体方法如下:
```html
<el-row type="flex" justify="center">
<el-col :span="12">
<!-- 这里放置你要水平居中的内容 -->
</el-col>
</el-row>
```
在这个例子中,`type`属性的值是`flex`,表示使用flex布局,`justify`属性的值是`center`,表示让子组件水平居中对齐。你可以根据实际情况调整`el-col`组件的`span`属性值,来控制子组件的宽度。
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就会居中显示了。