网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

css如何实现文本图标对齐呢?-创新互联

css如何实现文本图标对齐呢?很多人都不太了解,今天小编为了让大家更加了解css实现文本图标对齐的方法,所以给大家总结了以下内容,一起往下看吧。

成都创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站制作、网站设计、海湖新网络推广、微信小程序开发、海湖新网络营销、海湖新企业策划、海湖新品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们大的嘉奖;成都创新互联为所有大学生创业者提供海湖新建站搭建服务,24小时服务热线:13518219792,官方网址:www.cdcxhl.com

css如何实现文本图标对齐呢?

开发中遇见图片跟文字放在一行显示是最常见不过的了,两个行内元素的对齐通常也是最令人头疼,有时候明明使用了最常用的对齐方法,却总还是有些许偏差,先来看一个最基本的示例:

html部分:

xx测试对齐Style-

css部分:

.wrap {
      width: 300px;
      text-align: center;
      margin: 20px auto;
      font-size: 14px;
 }
 .wrap img {
      width: 20px;
 }

未使用对齐方式的效果如下:

css如何实现文本图标对齐呢?

默认的对齐方式是 baseline ,也就是x字母的最下面那条线。

这也就回答了第一个问题,浏览器的图片跟文字未额外设置时是基于小写字母x的下边缘为基准,也就是 vertical-align:baseline; 。

常见的几种居中方案

1、使用 vertical-align 居中对齐方式

.wrap {
    vertical-align: middle;
    }
.wrap img {
    vertical-align: middle;
}

当我们使用常用的 vertical-align 对齐文本和图片时,其实也是有一定的偏差的,如下图:

css如何实现文本图标对齐呢?

vertical-align 的middle值实际上是相对于小写字母x的一半高度来说的,所以图片会跟x的中间开始对齐,但是其他字符譬如S、中文,就会发现无论如何都会出现稍许偏差,图片会相对而言偏下。

2、使用 vertical-align 同时使用span包裹文本

让我们再稍做改变,将文本部分使用span标签包裹,并且对span使用 vertical-align: middle; 样式对齐。会发现此时图片会上移少许。

效果如下:

css如何实现文本图标对齐呢?

3、使用flex布局

display: flex;
align-items: center;

css如何实现文本图标对齐呢?

不过就算是flex布局,有时候也会出现一点儿偏差,比如:图片尺寸为偶数、字体font-size为偶数,line-height为偶数时对齐;奇数时偏上1px。

4、使用ex单位

ex就是小写字母x的高度,可以用在不受字体和字号影响的内联元素的垂直居中对齐效果。

PS:不过这种适用于图标高度跟文字一致,比如字符后面加一个箭头(点击展开)的情况,就很实用。

.wrap img {
    height: 1ex;
}

5、vertical-align 数值方式的使用

vertical-align 属性值可以使用数值型和百分比值,如,还是上面的基本案列:如果图片高度是20px,文字font-size为22px时,默认对齐是文字的基线,那么图片会偏上2px,这时只需要将图片向下偏移2px,就能实现对齐效果,而且 vertical-align 这个属性的数值型具有很好的兼容性。

.wrap {
            width: 100%;
            padding-top: 200px;
            text-align: center;
            margin: 20px auto;
            font-size: 22px;
            height: 40px;
            
        }
        .wrap img {
            width: 20px;
            vertical-align: -2px;
        }

关于css如何实现文本图标对齐就分享到这里了,当然并不止以上和大家分析的办法,不过小编可以保证其准确性是绝对没问题的。希望以上内容可以对大家有一定的参考价值,可以学以致用。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。


当前题目:css如何实现文本图标对齐呢?-创新互联
标题路径:http://bjjierui.cn/article/deicco.html

其他资讯