el-icon不垂直居中，与文字不对齐的解决策略

已于 2023-04-13 08:45:34 修改
阅读量10w+ 收藏 3
点赞数
文章标签： javascript css 前端
于 2023-03-23 00:07:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58768224/article/details/129722187
版权

我们在使用el-cion的时候，渲染出来之后它是一个i包裹着一个svg的，默认不会垂直居中，就会与文字形成偏移

 

居中的策略：

1、将外层div设置为display:flex，设置垂直居中

2、将el-icon设置一个size，大概和文字一样大即可

最终实现的效果：成功垂直居中，与文字对齐

鱼骨编程
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
实现icon和文字垂直居中的两种方法－（vertical-align and line-height）
xizai2012的专栏
07-23 1万+
方法一：vertical-align 在w3school定义：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐 百思不得骑姐 然后Google，反正在w3schools上面并没有找到定义 只能写代码测试 而后个人理解，才作出如此解释》 该属性作用的对象：行内元素（inline，inline-block也有行内属性） 其他table-cell  常用属性值：top mid
elementui中实现el-row中的el-col垂直居中显示
weixin_45454859的博客
04-17 6793
elementui中实现el-row中的el-col垂直居中显示
el-row 和el-col 样式对齐
最新发布
qq_35175478的博客
05-28 365
【代码】el-row 和el-col 样式对齐。
Element el-row el-col 布局组件详解
热门推荐
程序员大阳
01-27 11万+
1. 背景 element的布局方式与bootstrap原理是一样的，将网页划分成若干行，然后每行等分为若干列，基于这样的方式进行布局，形象的成为栅栏布局。 区别是element可将每行划分为24个分栏，而bootstrap是划分为12个分栏，从使用角度，还是24个分栏更加精细。 2. 分栏布局 首先每行使用<el-row>标签标识，然后每行内的列使用<el-col>标识，至于每列整行的宽度比例，则使用:span属性进行设置。 如下代码，即为将1行等分为2列，为了便于区分列，我们为列
css样式实现表格中字体垂直居中的方法
asteriaV的博客
03-16 2795
有一个自定义表格如下所示，当所返回数据改变时，都能自动居中 //html <div class="grid-content1 "> <div class="subject1">{{item.subject1}}</div> </div> //css ....
Element-ui的一行中的每个列元素垂直居中对齐
鸣鼓ming的博客
07-19 9457
解决办法 1.在el-row标签中启用 flex 布局, 即type=“flex” 2.同时在el-row标签设置样式style=“align-items: center” <el-header style="background-color: #47494E"> <el-row type="flex" justify="space-around" style="align-items: center"> <el-col :span="4"
element ui el-icon 图标样式修改
weixin_53898445的博客
01-18 4658
.el-icon-plus{ font-size:30px; //改变图标大小 line-height: 110px; //通过设置行高让图标垂直居中 text-align:center; //水平居中 color: #409EFF; //设置图标颜色 }
表单元素和文字垂直居中对齐问题解决整理
09-25
在网页设计中，表单元素和文字的垂直居中对齐是一个常见的需求，尤其是在创建整洁、用户友好的界面时。本文主要讨论了如何解决表单元素（如输入框、下拉框、单选框和复选框）以及与其关联的文字在垂直方向上保持一致...
Firefox下input button内文字不能垂直居中的解决方法
09-25
在Firefox下input type=”button”的文字是不好居中的，原因在于Firefox自己弄了个私有属性，解决方法很简单，遇到类似问题的朋友可以学习下，希望可以帮助到大家
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
弹出层（遮罩层）弹出页面垂直居中
09-03
弹出层（遮罩层）弹出页面垂直居中，一个不错的例子，可拿来使用。
解决vue中el-tab-pane切换的问题
10-15
在本文中，我们将深入探讨如何解决Vue中`el-tab-pane`切换时遇到的问题，以及如何优化和管理组件的渲染。 首先，问题出现在当用户在不同数量的`el-tab-pane`之间切换时，`el-dialog`可能会保持之前的状态，这通常是...
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
然而，在实际开发过程中，开发者可能会遇到使用 `v-show` 或 `v-if` 控制 `el-tab-pane` 显示与隐藏时不起作用的问题。这通常是因为 `el-tab-pane` 的渲染机制导致的。 `v-show` 和 `v-if` 都是 Vue 中的条件渲染...
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
1. **使用`$nextTick`**：与上述解决方案类似，在`$nextTick`回调中调用`resetFields()`，确保`el-form`已经被正确地编译到DOM中。 ```javascript resetForm(formName) { this.$nextTick(() => { this.$refs[form...
el-select数据过多懒加载的解决(loadmore)
10-16
主要介绍了el-select数据过多懒加载的解决(loadmore)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
(css)element-ui表单整体居中
nyf_unknow的博客
03-19 1154
在这个例子中，el-row 类型设置为 flex 启用Flexbox布局，justify 属性设置为 center 以水平居中内容，align 属性设置为 middle 以垂直居中内容。el-col 组件用于定义列宽，确保在不同屏幕尺寸下表单都能正常显示。这样就可以实现Element UI表单在页面中整体居中的效果。要在Element UI中使表单整体居中，可以使用Flexbox布局。
Element-Plus el-col、el-row快速布局
白瑕 的博客
05-11 3万+
一篇博客学会el-col布局工具的使用
css - 盒子水平垂直居中的几种方式
qq_43886365的博客
05-11 1191
前端div盒子水平垂直居中的几种方式: 使用子绝父相，利用css3新增`transform的translate`属性来进行垂直居中； translate可以同时传两个属性，第一个是水平方向移动距离，第二个是垂直方向的移动距离；translate中的%百分比相对的是自身的 ，也就是向左向上走自身的%50来实现居中效果；
el-icon图标未上下居中
04-01
要使el-icon图标上下居中，可以使用以下CSS代码： ``` .el-icon { display: flex; align-items: center; justify-content: center; } ``` 这将使el-icon的内容垂直居中，并将其水平居中。您可以将此代码添加到您的样式表中，或者将其添加到特定的el-icon类中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鱼骨编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值