实现icon和文字垂直居中的两种方法－（vertical-align and line-height）

最新推荐文章于 2023-12-28 13:31:45 发布
最新推荐文章于 2023-12-28 13:31:45 发布
阅读量1.8w 收藏 4
点赞数
分类专栏： css 文章标签： css vertical-align line-height 图片文字垂直居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xizai2012/article/details/47013379
版权
本文介绍了两种实现CSS中icon和文字垂直居中的方法：1) 使用`vertical-align`属性，调整行内元素的基线对齐，常见值包括top、middle和bottom；2) 利用`line-height`属性，在块级元素中设置与高度相同，使行内元素垂直居中。通过实例演示了这两种方法的效果。
摘要由CSDN通过智能技术生成

方法一：vertical-align

在w3school定义：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

百思不得骑姐

然后Google，反正在w3schools上面并没有找到定义

只能写代码测试

而后个人理解，才作出如此解释》

最低0.47元/天 解锁文章
Mesut_Ozil
关注
专栏目录
Element-UI控件上下居中，比如el-input上下居中显示
楊帥
04-16 3万+
<div class="home_input"> <el-input placeholder="请输入内容" v-model="search_text"> <el-button slot="append" icon="el-icon-search"></el-button> </el-input> </div&g...
elementplus图标和span对齐
最新发布
kekexiaomayi的博客
08-06 143
设置el-icon高度，行高，垂直居中，设置span的vertical-align。
26-Icon图标和文字垂直居中的N种解决方法
小凡子的博客
12-20 4853
我们经常会遇到图标和文字不能对齐的情况。那么这篇文章可以帮助到你
el-icon不垂直居中，与文字不对齐的解决策略
热门推荐
鱼骨编程
03-23 25万+
element-plus中el-icon不垂直居中，与文字不对齐的解决策略
常见的移动端icon和文字垂直居中的实现。
xinfeiyanwu1的博客
03-22 656
思路：icon和文字设置成inline-block，搭配flex的align-items: center;即可轻松实现图标和文字的垂直居中。 html： style： #box{ border: 1px solid #ccc; display: flex; align-items: center; } #icon{ display: inline-block; ...
小图标和文字垂直居中的解决方法
xmy_wh的博客
07-04 1万+
我们经常会遇到图标和文字不能对齐的情况。&lt;div class="box"&gt; &lt;img class="icon" src="restart.png"/&gt; &lt;span class="text"&gt;垂直居中&lt;/span&gt; &lt;/div&gt;css：.icon{display:inline
解决icon字体图标和文字对齐的方法
qq_45401346的博客
04-21 7272
第一步：找到包裹或使用icon图标的标签， 第二步：将其标签设置为inline-block（行内块） 第三步：再添加属性vertical-align:top; 因为字体图标虽说是字体，但也是图片 ...
大小不固定的图片和多行文字的垂直水平居中实现分析
12-13
可能很多人都知道如何让单行文字垂直居中显示，就是使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了。例如： 单行文字居中显示测试，css样式为： height:3em; line-height:3em;…… ② ...
html背景图片垂直居中,css — 定位、背景图、水平垂直居中
weixin_35695652的博客
06-04 1718
css — 定位、背景图、水平垂直居中目录1. 定位2. 背景图3. 水平垂直居中1. 定位position:static | relative | absolute | fixed;static 静态定位relative 相对absolute 绝对fixed 固定1.1 静态定位静态定位意味着“元素默认显示文档流的位置”。没有任何变化。1.2 相对定位 relative1.特征：给一个标准文档流...
div+css实现水平居中、垂直居中和水平垂直居中
weixin_44427407的博客
01-21 487
盒子模型布局（div+css） 本次记录html里元素布局的实现，即使用css实现元素的水平居中、垂直居中、水平垂直居中。 在此之前先记录一下，块级元素、行级（内联）元素、内联块元素这三个概念。接下来就依次作简单介绍。 1.块级元素（display:block） 其特性有： 元素独占一行，其自己另起一行开始，并且其后元素也另一起一行开始。 元素高度（height）、宽度（width）、行高（line-height）、内边距（padding）、外边距（margin）均可设置。 元素占据其父元素的整个容器
vue3＜template #icon＞ 写一个居中样式
重庆一站通的博客
08-10 753
设置容器高度为视口高度的100%（可以根据需要调整高度）。你可以根据需要添加其他样式来调整图标的大小、颜色等。样式，可以使用CSS来实现。：将容器设置为弹性布局。来源http://www.duozitu.com/
让一个i标签内的伪元素小图标垂直居中对齐
sunchanglan151的博客
03-18 4978
.num .icon[data-v-5e7337c8] { width: 60px; color: aliceblue; line-height: 60px; text-align: center; }
element ui el-icon 图标样式修改
weixin_53898445的博客
01-18 4751
.el-icon-plus{ font-size:30px; //改变图标大小 line-height: 110px; //通过设置行高让图标垂直居中 text-align:center; //水平居中 color: #409EFF; //设置图标颜色 }
uniapp中uview组件库丰富的LoadingIcon 加载动画
精通前端技术，了解后端接口
12-28 2682
可以指定文字和图标是否垂直排列。可以指定动画活动区域的颜色,设定尺寸，单位rpx，组件内把。可以指定动画的运行周期时间。为经典类似花朵的形状。值体现为组件的宽和高。
uView 2.0使用自定义iconfont图标
baidu_37302589的博客
05-16 4996
view2.0暂不支持使用自定义图标，只能通过修改源码去实现 实现后的效果如下 1、先去图标库选择想要的icon加入项目，再生成代码 2、再点击下载代码，解压后如下 3、编写test.js文件，并通过 node test.js 执行 let path1 = "./iconfont.json"; let fs = require('fs'); const path = require('path'); let plays = JSON.parse(fs.readFileSync(path1)); co
uni-app开发微信小程序,如何让文字在垂直及水平居中和底部对齐
weixin_45395283的博客
09-21 2326
view class="main-content-phone-content-list flex-center">充值历史
element实现文字后面加图标并且有提示文字
凡尘
10-31 1675
element实现文字后面加图标并且有提示文字
vertical-align 垂直对齐方式
Exist_ing的博客
12-12 928
vertical-align         垂直对齐方式(用在两个或多个，内联或者内联块元素垂直方向的对齐)        值                              描述        baseline             默认。元素放置在父元素的基线上。        sub                     垂直对齐文本的下标。
vue icon和文字 合并到一行， 文字水平垂直居中
05-24
你可以使用Flexbox布局来实现将图标和文字合并到一行，并将它们水平垂直居中。以下是一个示例代码： ```html <i class="icon"> <span class="text">Hello World ``` ```css .wrapper { display: flex; align...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值