<el-row justify="end"> <el-col style="font-family: KaiTi, serif; font-size: 13px"> 打印日期:{{ printValue.printTime }}</el-col > </el-row>如何让内容垂直居中
时间: 2024-02-14 13:10:17 浏览: 120
可以在 `<el-row>` 标签中添加 `align="middle"` 属性来使内容垂直居中,如下所示:
```html
<el-row justify="end" align="middle">
<el-col style="font-family: KaiTi, serif; font-size: 13px">
打印日期: {{ printValue.printTime }}
</el-col>
</el-row>
```
此时,`<el-col>` 中的内容就会在行内居中显示。
相关问题
<el-row justify="end"> <el-col style="font-size: 13px"> 打印日期:{{ printValue.printTime }}</el-col > </el-row>如何让文本竖向居中
要让文本竖向居中,可以使用`display: flex`和`justify-content: center`属性来实现。具体地,在`<el-col>`标签上添加以下样式即可:
```
display: flex;
justify-content: center;
flex-direction: column;
```
这样就可以让文本在竖直方向上居中显示。完整的代码如下:
```
<el-row justify="end">
<el-col style="font-size: 13px; display: flex; justify-content: center; flex-direction: column;">
打印日期:{{ printValue.printTime }}
</el-col>
</el-row>
```
<el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>能力发布驳回数</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>人工告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>自动告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>钉钉告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>BOMC告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> </el-row>如何让这五个卡片大小统一展示在一条线上
你可以尝试在每个 `<el-col>` 元素中添加 `align="center"` 属性,同时在最外层的 `<el-row>` 元素中添加 `justify="center"` 属性,代码如下:
```
<el-row justify="center">
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>能力发布驳回数</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>人工告警数量</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>自动告警数量</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>钉钉告警数量</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>BOMC告警数量</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
</el-row>
```
这样设置后,每个卡片的宽度会被限定在 `<el-col>` 元素的宽度内,同时 `<el-row>` 元素的 `justify` 属性可以让所有的元素在水平方向上居中对齐。