css实现文本图标对齐的方法


本文摘自PHP中文网,作者V,侵删。

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

html部分:

1

2

3

4

<div class="wrap">

    <img src="https://avatars3.githubusercontent.com/u/16339041?s=60&v=4" alt="">

    xx测试对齐Style-

</div>

推荐教程:CSS入门教程

css部分:

1

2

3

4

5

6

7

8

9

.wrap {

      width: 300px;

      text-align: center;

      margin: 20px auto;

      font-size: 14px;

 }

 .wrap img {

      width: 20px;

 }

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

ea948867cf9545ab889d5f8db76bf5e.png

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

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

常见的几种居中方案

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

1

2

3

4

5

6

.wrap {

    vertical-align: middle;

    }

.wrap img {

    vertical-align: middle;

}

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

d8c555866345ebfb76239c518ceb68a.png

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

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

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

效果如下:

阅读剩余部分

相关阅读 >>

如何利用css实现放大缩小关闭效果

css怎么设置span的宽度

3种css使用方法

css怎么改变png图片的颜色

关于css中清除浮动(clearfix)的介绍

margin和padding的区别是什么

js框架与css框架的区别是什么

炫酷的 css 边框动画,快来收藏吧!

css复合样式怎么做

css文字如何垂直居中

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...