el-descriptions文本水平垂直居中

最近element-ui遇到了很多坑，做项目想要让el-descriptions标签内容文本水平垂直居中，上网查发现都不顶用

花了一些时间，查阅了下官方文档。

发现不能直接对它样式进行修改，通过contentStyle和tabelStyle属性设置其样式，且属性值需要封装成对象

知道原理就好办了，先设置样式对象

data() {return {rowCenter:{"text-align":"center"}}
}

将创建好的样式对象通过element-ui给我们的属性值进行设置

<el-descriptions :contentStyle="rowCenter" :labelStyle="rowCenter"><el-descriptions-item></el-descriptions-item>
</el-descriptions>

最后查看下效果

非常Nice！！

el-descriptions文本水平垂直居中相关推荐

CSS02_设置盒子水平+垂直居中设置文本水平+垂直居中
写在前面:此贴为CSS高频题,针对盒子模型的水平+垂直居中,还提到了其内部文字的居中,如有补充,请留下评论 HTML代码结构: <body><div class="box- ...
html css实现文本水平垂直居中显示
这几天在工作中遇到了一个小问题:文本内容怎么能在div里水平垂直居中显示呢?同时群里的小伙伴恰巧也有提问这个问题的,所以我就总结了一下我知道的方法. 一.利用行高(line-height)和verti ...
html 水平垂直居中,css水平垂直居中有几种实现方式？
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...
css实现元素水平垂直居中
记录两个思路,当然还有其他方法,如果用到再补充: <div class="parent" style="background:red;width:200px;hei ...
css --- [小结]让盒子水平垂直居中的解决方案
描述有如下模型,想办法让 <style>.box{width: 500px;height: 500px;background: skyblue;} </style> < ...
元素水平垂直居中的六种方式
文章目录前言代码预设一.绝对定位 + transform 二.绝对定位 + margin 1.不用子盒子的宽高 2.需要子盒子的宽高三.table-cell 属性四.flex 布局五.ca ...
前端：水平垂直居中的10种方法
第一种: 通过绝对定位的方式 absolute + 负margin 首先知道子元素的宽高,给子元素设置top:50%:left:50%, 但绝对定位是基于子元素的左上角,我们所希望的效果是子元素的 ...
前端面试题--水平垂直居中的方法
1.弹性盒子给父元素设置 display:flex; justify-content:center; align-items:center; .father {width: 200px;height ...
CSS常用水平垂直居中的几种方法
CSS水平垂直居中一.利用margin:auto 二.利用position: absolute 三.弹性盒子四.利用水平对齐和行高五.grid 为方便理解,欢迎查看线上效果,在线试一试一.利用 ...
CSS水平垂直居中的几种实现方式
水平垂直居中 1.利用 `position:absolute` 2. 利用`margin:auto` 3. 利用弹性盒子 4. 利用水平对齐和行高 5. 最简便的方法 1.利用 position:ab ...

el-descriptions文本水平垂直居中

el-descriptions文本水平垂直居中相关推荐

最新文章

热门文章