摘要:图标跟文字混排分享截图注意父容器的值与图标的高度相等,另保持设置图标的的值为。上下垂直居中,需要兼容低版本的浏览器时用比用要好很多。
1、图标跟文字混排
html
分享
css
.link{ width: 92px; border: 1px solid #0f0; line-height: 18px; } .icon{ display: inline-block; *zoom: 1; vertical-align: bottom; } .wyyx{ width: 18px; height: 18px; background: url(http://p2.qhimg.com/t0116804ffa3cc8a59f.png) no-repeat; }
截图:
注意:
父容器的line-height值与图标的高度相等,另保持设置图标的vertical-align的值为bottom。
2、上下垂直居中,需要兼容低版本的浏览器时用padding比用line-height要好很多。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/111101.html
摘要:现在回到我们这一章节的标题,将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面,网页上并不存在表单内容,那么你就要移除一些冗余的代码,开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节,我们都说了哪些内容: CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...
摘要:现在回到我们这一章节的标题,将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面,网页上并不存在表单内容,那么你就要移除一些冗余的代码,开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节,我们都说了哪些内容: CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...
摘要:一个叫的人用纯重绘并模拟了种不同的移动设备包括可以给你的网站添加不相关的独立组件的一个库。每一个组件都是针对移动设备定制的,并且它有很多你在传统的框架中看不到的功能。如果你用开发移动优先的网站,并想要网站正常运行在低版本的上,可以考虑。 众所周知,CSS是非常棒的,它使网站看起来很漂亮,可以为网站添加动画,并让呈现和内容分离。去了解CSS的一切是非常难做到的,它只会变得更加困难,因为我...
阅读 2830·2023-04-26 02:23
阅读 1569·2021-11-11 16:55
阅读 3148·2021-10-19 11:47
阅读 3351·2021-09-22 15:15
阅读 1974·2019-08-30 15:55
阅读 1032·2019-08-29 15:43
阅读 1287·2019-08-29 13:16
阅读 2187·2019-08-29 12:38