vue3 图标未对齐 vertical-align: middle

已于 2022-05-25 16:13:03 修改
阅读量487 收藏
点赞数
分类专栏： vue基础学习 css效果 文章标签： css css3 前端
于 2022-05-25 14:58:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45044349/article/details/124966149
版权
在Vue3应用中遇到图标未正确对齐的问题，即使没有设置高度和行高，图标依然上浮。文章详细介绍了如何使用CSS的`vertical-align: middle`属性来解决这一问题，该属性用于定义行内元素的基线垂直对齐，可以设置负长度值和百分比值以调整元素的位置。在表格单元格中，此属性会影响单元格内容的对齐。
摘要由CSDN通过智能技术生成

图示

在这里插入图片描述
vue中未设置高度及行高，小图标一直处于上浮状态

代码

 <div class="item">
<div class="item_title">真实姓名</div>
   <div class="item_content"<
最低0.47元/天 解锁文章
outside-R
关注
专栏目录
实现icon和文字垂直居中的两种方法－（vertical-align and line-height）
xizai2012的专栏
07-23 1万+
方法一：vertical-align 在w3school定义：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐 百思不得骑姐 然后Google，反正在w3schools上面并没有找到定义 只能写代码测试 而后个人理解，才作出如此解释》 该属性作用的对象：行内元素（inline，inline-block也有行内属性） 其他table-cell  常用属性值：top mid
利用vertical-align:middle垂直居中
weixin_43743956的博客
01-05 1480
1.方法一，利用空的span实现图片居中 &amp;lt;!doctype html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;style type=&quot;text/css&quot;&amp;gt; div{ wi
vue3 快速入门 (五) : Flex布局
最新发布
朱豪凯的博客
07-28 2003
介绍VUE3中的FLex布局
Vertical-align属性应用
weixin_43837268的博客
10-10 416
官方解释：用户设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效 语法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati
2021-08-06随记(vertical-align, 顶线、底线、中线、基线，vue原理理解)
qq_38301396的博客
08-06 612
20210804 (vertical-align, 顶线、底线、中线、基线，vue原理理解) vertical-align 父元素是inline或者是table-cel，如果是inline-block或者block则必须要设置line-height(和高度一样)子元素为inline或者inline-block才可以，vertical-align属性不继承，必须单独设置 顶线、底线、中线、基线 顶线：汉字的最顶部 底线：汉字的最底部 中线：英文x的中部 基线：英文x的底部 行高，行距，
Vue3 低代码开发平台 对齐线功能 问题记录
Lyrelion的博客
08-26 1458
1. 功能描述（对齐 + 自动吸附） 2. 功能实现 2.0 添加需要的数据结构类型接口 2.1 添加 对齐线组件 的 全局数据 2.2 添加 对齐线组件 的 全局方法 2.3 添加对齐线组件 2.4 在设计中心（画布）组件中使用对齐线组件 2.5 在组件移动监听的页面中，书写对齐线的显隐逻辑，并调用
vue中align_vuejs 中组件实现
weixin_39916758的博客
12-03 890
组件化组件化是任何一个框架必须实现，如何将定义组件(js 对象)转化为 dom 对象，以及组件的属性转换为 dom 属性，这是每一个前端框架在设计时需要认真思考和设计的问题。const vm= new Vue({ el:'#root', data:{}, props:{}, methods:{}, watch:{}, computed:{}, templa...
设置图片垂直居中line-height和vertical-align的区别
weixin_45856470的博客
06-07 989
先看一个案例：
vue组件实现文字居中对齐的方法
08-29
Vue 组件实现文字居中对齐的方法 在 Vue 中实现文字居中对齐的方法是一个常见的需求，本文将详细介绍如何使用 Vue 组件实现文字居中对齐的方法。 首先，我们需要编写 CSS 代码来实现文字居中对齐的效果。下面是...
vue中icon图标和文字、button对不齐的情况
憧憬是碎了满地凉凉的宝石
03-05 4904
之前的样式是这样，在顶部对齐，没有居中对齐。 设置图标的属性： style="vertical-align: -15%" 设置蓝色按钮的属性 style="vertical-align: 65%" 设置完成后的效果 vertical-align：定义和用法 vertical-align 属性设置元素的垂直对齐方式。 说明 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元.
按钮居中vue_vue组件实现文字居中对齐的方法
weixin_40005437的博客
12-21 2656
继续学习Vue，这次是一个组件的制作过程先让我们来看一下组件的预期效果上图为公司自营的一个微信商城的某一部分截图，可以看到红框内部分的文字多行与单行是居中对齐的，我们现在要做的就是使用Vue把里边的文字模块制作成一个可以复用的组件。首先我们先把css部分拿下来css:.word-v-middle{margin-bottom: 0;font-size: 12px;min-height: 31px;d...
【已解决】align-items：center失效，无法垂直居中问题！
蹦极的考拉
09-25 4434
解决方案，注意将父元素设置高度，还有如果是单独页面，设置高度为100vh。如果你的父元素没有高度，那么子元素不会垂直居中问题。
「后端小伙伴来学前端了」记录自己的踩坑第一天 | CSS:vertical-align 属性
北
11-04 128
前言 最近老师让大家单独写前后端分离项目，真是大家卷完后端，一起去卷前端了。（我以前都是主要负责后端，处于只大致看的懂的级别，说多了都是泪啊）。 真是处于一边学一边写的状态，基本就是每天早上看上两~三小时视频（主要是复习css、js、vue框架），之后开始敲代码。 只有等到晚上回到寝室才有空写写文章，复习和总结一遍。 CSS：vertical-align 属性 vertical-align 属性设置元素的垂直对齐方式。 我们直接用案例来说明： 1）代码： html代码： <div class="b
VUE中icon图标与文字不齐
tao_meng_的博客
02-02 3947
VUE中icon图标与文字不齐 最近在使用vant组件引用了某个icon之后发现与文字对不齐，找到了一个最简便的办法就是直接给icon加上属性vertical-align: -10% <van-icon name="browsing-history" style="vertical-align: -10%"/>文字 再次点开发现已经对齐了 ...
vue3项目中使用iconfont图标
黄钢的博客
12-05 3820
写前端项目时，经常要用到iconfont图标，我最原始的方法是吧iconfont图标下载为png/svg文件，然后在文件中作为资源引入，后来发现这么搞太不专业了记录一下相对比较靠谱的使用方法。
[解决]Vue 父组件放置错误
m0_64838460的博客
11-28 287
小错误解决
第38节: Vue3 鼠标按钮修改器
特创数字
12-23 599
在UniApp中使用Vue3框架时，你可以使用按键修饰符来更精确地处理键盘事件。以下是一个示例，演示了如何在UniApp中使用Vue3框架使用.left.right和.middle在上面的示例中，我们在元素上使用了@keydown监听事件，并在事件前没有添加任何修饰符。然后，在方法中，我们检查按下的键是否为左键、右键或中键，并且是否同时按下了Alt键。如果是，则输出相应的消息到控制台。通过使用.left.right和.middle按键修饰符，你可以更精确地处理键盘事件，并区分不同的按键情况。
article-cover[data-v-fbe5d92c] { width: 0.99rem; flex-shrink: 0; height: 0.66rem; border-radius: 0.03rem; vertical-align: middle; border: 0.005rem solid #ddd;这段代码如何优化能在h5端正常显示图片
06-09
这段代码中设置了图片的宽度、高度和边框等样式。在 H5 端，可能需要根据不同的屏幕尺寸进行适配，可以使用响应式布局或者媒体查询等技术来实现。 例如，可以使用百分比来设置宽度和高度，如下所示： ``` .article-cover[data-v-fbe5d92c] { width: 30%; /* 设置为屏幕宽度的 30% */ height: auto; /* 高度自适应 */ border-radius: 0.03rem; vertical-align: middle; border: 0.005rem solid #ddd; } ``` 另外，还可以使用图片的属性来设置宽度和高度，如下所示： ``` <img class="article-cover" :src="coverUrl" :width="imgWidth" :height="imgHeight"> ``` 在 Vue.js 中，可以使用响应式数据来动态计算图片的宽度和高度，例如： ``` data() { return { screenWidth: document.documentElement.clientWidth, // 获取屏幕宽度 coverWidth: 0.99, // 图片宽度 coverHeight: 0.66, // 图片高度 } }, computed: { imgWidth() { return this.screenWidth * this.coverWidth + 'px'; // 计算图片宽度 }, imgHeight() { return this.screenWidth * this.coverHeight + 'px'; // 计算图片高度 }, } ``` 这样可以根据屏幕宽度动态计算图片的宽度和高度，并且在不同的设备上都能正常显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

outside-R

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

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

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

打赏作者

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

抵扣说明：

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

余额充值