vue中icon图标和文字、button对不齐的情况

最新推荐文章于 2023-11-01 17:14:07 发布
VIP文章 最新推荐文章于 2023-11-01 17:14:07 发布
阅读量4.5k 收藏 4
点赞数 1
分类专栏： vue前端 文章标签： vue.js javascript 前端
lucky
本文链接：https://blog.csdn.net/weixin_44690047/article/details/123297176
版权

之前的样式是这样，在顶部对齐，没有居中对齐。

设置图标的属性：

style="vertical-align: -15%"

设置蓝色按钮的属性

style="vertical-align: 65%"

设置完成后的效果

vertical-align：定义和用法

vertical-align 属性设置元素的垂直对齐方式。

说明

 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单

最低0.47元/天 解锁文章
皮蛋瘦肉周_
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目中如何引入icon图标
12-12
1.下载icon图标，推荐icomoon网站，里面有大量的矢量图标，也可以自定义，当然你也可以去阿里巴巴矢量图标库下载你所需要的小图标。点击进入icomoon网站点击右上角“IcoMoon App”，找到自己需要的图标后选择然后点击右下角“Generate Font”,接着可以在左上角第二个按钮“Preferences”进行自定义你要下载的图标信息，一般我都是进去改一下“Font Name”,然后返回点击右下角“Download”,这样你就下载了图标。 2.解压下载的图标压缩包，得到这样的文件： 3.在vue项目里src文件夹中新建common文件夹，将这里的fonts复制到common中，
vue使用自定义icon图标的方法
12-11
首先因为elementUI提供的icon太少了，所有自己找找有没有矢量图可以补充的，尝试多种方法，觉得下面方法简单易懂，分享给大家 效果图： 推荐使用阿里爸爸矢量图标管理，iconfont 使用方法 登录账号，找到需要的图标加入购物车 然后添加到项目  再然后下载代码到本地 下载代码文件然后解压出现这列表 打开HTML文件，引用方法教程 补充我人的坑，之前想着在style标签里@import “”，结果一直报错，试了很多方法还是没效果，把问题想复杂了 第一步：在index.html引入fontclass代码： <link rel="stylesheet" type="text/c
vue-form-maker:Vue 表单生成器——动态生成表单组件
05-02
简介 Vue 动态生成表单组件，可以根据数据配置表单，使用的UI库是。 有问题或BUG欢迎提 表单组件 Input 输入框 Button 按钮 Radio 单选框 Checkbox 多选框 Icon 图标 Switch 开关 Select 选择器 Slider 滑块 DatePicker 日期选择器 TimePicker 时间选择器 Cascader 级联选择器 InputNumber 数字输入框 Rate 评分 Upload 上传 ColorPicker 颜色选择器 使用 在单文件组件中引用 npm i vue-form-maker import VueFormMaker from 'vue-form-maker' import ViewUI from 'view-design'; import 'view-design/dist/styles/iview.css'; // 如需使用城市
vue中v-for循环给标签属性赋值的方法
12-29
1.给每个按钮添加class的属性值以及icon图标属性值，通过v-for实现自动添加样式，发现属性值无法显示，切记在属性前加上v-bind <html> <head> <meta charset=utf-8> <title>v-for在线测试实例</title> [removed] [removed]</head><body> <button v-bind:class=site
css 顶端对齐
lingongheng
03-30 1万+
vertical-align: top;
vertical-align 垂直对齐方式
Exist_ing的博客
12-12 849
vertical-align         垂直对齐方式(用在两个或多个，内联或者内联块元素垂直方向的对齐)        值                              描述        baseline             默认。元素放置在父元素的基线上。        sub                     垂直对齐文本的下标。
【CSS】vertical-align 垂直对齐 ( 块级元素对齐 | 行内元素 / 行内块元素对齐 | 基线对齐 | 垂直居中 | 顶部对齐 | 底部对齐 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-16 1784
一、取消文本域拖拽 二、vertical-align 垂直对齐代码示例
vue+element ui中的el-button自定义icon图标
最新发布
蓝胖子的博客
11-01 5236
vue+element ui中的el-button自定义icon图标
Vue开发实例（08）之Icon图标的使用
编程界明世隐的博客
04-28 2万+
icon图标的使用 Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ 即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单
css实现垂直顶部与底部对齐、上下两端对齐、height、display、flex、wrap、content、space、between
“代码农”微信公众号
12-01 3104
css实现垂直顶部与底部对齐、上下两端对齐、height、display、flex、wrap、content、space、between
简单方便的表单拖拽设计器（vue+ElementUI）
01-13
基于vue+ElementUI的表单设计器。让表单拖拽更加简单方便 - 2020-12-15: 增加button组件 - 2020-12-25: 增加分割线组件 - 2020-12-28: 增加Alert 警告组件 - 2021-01-01: 增加文本组件 - 2021-01-01: 增加html组件 ...
vue中将按钮设置到网页最右边
热门推荐
小懒魔王的博客
07-04 2万+
<el-row :gutter="12"> <el-col :span="24"> <el-card shadow="always" class="cardstyle"> 靠港需求发布 <el-button type="success" class="button1" style="padding-right:10px"> 从Excel导入</el-button> .
vue3-基础知识（4）- 组件
junjiahuang的博客
11-18 375
业务型组件包含业务的交互逻辑，包括购物车、登录注册等，会和我们不同的业务强绑定。通用型组件就是各大组件库的组件风格，包括按钮、表单、弹窗等通用功能。
vue中给v-for循环里的指定内容加样式、以及给点击的a标签加高亮
不积跬步何以至千里
07-27 1273
vue
关于搜索框与搜索按钮垂直对齐
Yous的博客
06-24 639
搜索框与搜索按钮垂直对齐
Vue 3 风格指南解析
ly-chn的博客
04-21 251
简单翻译了一下vue3的风格指南, 有些简化, 然后也有一些夹带私货. 真心希望大家编码时尽量贴近规范
css 设置行内元素顶部对齐
blue beard的博客
04-07 3263
display: inline-block;vertical-align: top;
VUE element-ui中el-button使用iconfont图标
hhb442的博客
06-27 2748
注意：这里icon-font将图标作为文字格式处理，即修改字体大小样式，icon随之改变。4、将文件解压后，在项目assets下新建文件，将解压文件放入。1、进入iconfont官网。可以看到和其他相同的效果；可以看到字体样式太大。并使用任意方式登录。
前端面试题：未知宽高的盒子如何实现水平垂直居中
m0_60665016的博客
12-29 339
一、子级绝对定位+transform <style> .out { position: relative; width: 500px; height: 500px; background-color: blue; } .in { position: absolute; left: 50%;
vue3中 elementplus中tabs怎么在el-tabs-pane中添加icon图标
05-24
在`el-tabs-pane`中添加图标可以使用`icon`属性。`icon`属性可以接受 Element Plus 中内置的图标名称或自定义 SVG、图片等图标。 以下是一个简单的例子，其中使用了 Element Plus 中的`el-icon-user`图标： ```html <el-tabs v-model="activeTab"> <el-tab-pane label="Tab 1"> <el-button type="primary" icon="el-icon-user">User</el-button> </el-tab-pane> <el-tab-pane label="Tab 2"> <el-button type="primary" icon="el-icon-search">Search</el-button> </el-tab-pane> </el-tabs> ``` 如果你想使用自定义图标，则可以使用`icon`属性来指定自定义图标的 URL。例如： ```html <el-tabs v-model="activeTab"> <el-tab-pane label="Tab 1"> <el-button type="primary" :icon="customIconUrl">Custom Icon</el-button> </el-tab-pane> <el-tab-pane label="Tab 2"> <el-button type="primary" :icon="customIconUrl">Another Custom Icon</el-button> </el-tab-pane> </el-tabs> ``` 其中，`customIconUrl` 是一个可以返回自定义图标 URL 的计算属性或 data 属性。 希望这可以帮助到你。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值