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

最新推荐文章于 2024-09-11 11:24:59 发布

皮蛋瘦肉周_

最新推荐文章于 2024-09-11 11:24:59 发布

阅读量4.9k

点赞数 1

分类专栏： vue前端文章标签： vue.js javascript 前端

lucky

本文链接：https://blog.csdn.net/weixin_44690047/article/details/123297176

版权

本文介绍了在Vue项目中遇到图标、文字和button对齐问题的解决方案。通过调整vertical-align属性，实现了元素的垂直居中对齐，有效解决了前端布局的视觉一致性问题。

摘要由CSDN通过智能技术生成

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

设置图标的属性：

style="vertical-align: -15%"

设置蓝色按钮的属性

style="vertical-align: 65%"

设置完成后的效果

vertical-align：定义和用法

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

说明

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

可能的值

值	描述
baseline	默认。元素放置在父元素的基线上。
sub

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

皮蛋瘦肉周_

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS 移动端实现高度不相同的盒子对齐

Kamikorosu的博客

01-13

806

给父盒子加以下css样式： display: flex; flex-wrap: wrap; justify-content: flex-start; 若要实现列不满左对齐效果可在父盒子上加个伪类撑开： .box::after { content: ''; flex: auto; } 效果如下图：

vertical-align 垂直对齐方式

Exist_ing的博客

12-12

943

vertical-align 垂直对齐方式(用在两个或多个，内联或者内联块元素垂直方向的对齐) 值描述 baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。

参与评论您还未登录，请先登录后发表或查看评论

vue3 中使用 icon 图标的 3 种方案

热门推荐

lingongheng

03-30

1万+

vertical-align: top;

css让两个不同高度的盒子，顶部对齐

macangyewangs的博客

08-31

5945

定义和用法 vertical-align 属性设置元素的垂直对齐方式。 baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 把元素的顶端与行中最低的元素的顶端对齐。 text-bottom 把元素的底端与父元素字体的底端对齐。 length % 使用 "line-height" 属性的百

css 设置行内元素顶部对齐

blue beard的博客

04-07

3344

display: inline-block;vertical-align: top;

VUE中icon图标与文字不齐

tao_meng_的博客

02-02

3951

VUE中icon图标与文字不齐最近在使用vant组件引用了某个icon之后发现与文字对不齐，找到了一个最简便的办法就是直接给icon加上属性vertical-align: -10% <van-icon name="browsing-history" style="vertical-align: -10%"/>文字再次点开发现已经对齐了 ...

vue使用自定义icon图标的方法

12-11

首先因为elementUI提供的icon太少了，所有自己找找有没有矢量图可以补充的，尝试多种方法，觉得下面方法简单易懂，分享给大家效果图：推荐使用阿里爸爸矢量图标管理，iconfont 使用方法登录账号，找到需要的...

Vue项目中如何引入icon图标

12-12

在Vue项目中引入图标是一项常见的任务，特别是在构建用户界面时，图标...希望这篇文章对你理解如何在Vue项目中引入icon图标有所帮助。如果你有任何疑问，欢迎留言讨论，我们会尽力提供支持。感谢对软件开发网的支持！

vue-button

03-20

Vue.js 是一个流行的前端JavaScript框架，它简化了Web应用程序的开发。在Vue生态系统中，"vue-button"通常指的是一个用于...在实际开发中，开发者可以根据项目需求对`vue-button`进行定制和扩展，以满足各种复杂场景。

element-ui 的el-button组件中添加自定义颜色和图标的实现方法

10-17

本篇文章将详细介绍如何在`el-button`组件中实现自定义颜色和图标。首先，对于颜色的自定义，Element UI 提供的`type`属性允许我们设置按钮的基本样式，例如`primary`、`success`、`danger`等。但当需要更多种类的...

CSS的20种对齐代码！左对齐、右对齐、中间对齐、底部对齐、两端对齐等，代码简单(最全)

u013179804的博客

04-23

5065

CSS 中的右很多对齐的方式，今天主要来分享 20 个常用的对齐方式。来一起看看吧。

css盒子顶对齐_CSS网格和盒子对齐模块

cundai5745的博客

07-14

967

css盒子顶对齐Having good control over alignment and justification is one of the major benefits of modern layout methods such as Flexbox and CSS Grid Layout. These alignment properties are specified in the ...

CSS 对齐

冷月醉雪的博客

08-02

502

使用margin的中间调整 <!DOCTYPE html > <html> <head> <meta charset="utf-8"> <title>自学教程(如约智惠.com)</title> <style> .center { margin:auto;

CSS------如何让大小不一样的div顶部对齐

weixin_30662109的博客

01-21

534

使display:inline-block；并排的两个div元素顶部对齐

weixin_43824675的博客

07-01

1537

css 添加 vertical-align: top;

css，使两个在同一行内的display:inline-block的div顶部对齐。

weixin_30468137的博客

12-30

309

两个都加上：vertical-align:top; 转载于:https://www.cnblogs.com/zccfun/p/6236499.html

CSS之让盒子水平居中对齐

diaoyin8112的博客

04-05

597

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子居中对齐</title> <style> .nav{ width: 300px;...

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 属性。希望这可以帮助到你。