学习《css世界》笔记之使用vertical-align数值实现文字和小图标对齐

效果图

HTML

<p>请选择<i class="icon-arrow"></i></p>
<p>请选择<i class="icon-arrow valing-1"></i></p>
<p>请选择<i class="icon-arrow valing-2"></i></p>

CSS

         .icon-arrow{display: inline-block;width: 20px;height: 20px;background: url(img/arrow.png);}.valing-1{vertical-align: middle;}.valing-2{vertical-align: -5px;}

学习《css世界》笔记之使用vertical-align数值实现文字和小图标对齐相关推荐

皮卡皮卡：学习CSS的笔记
1.CSS简介 CSS,指的是Cascading Style Sheet(层叠样式表). 2.CSS的引入方式 1)外部样式表(link): <link rel=" ...
第17天学习Java的笔记（匿名对象，随机数，猜数字小游戏）
33天! 匿名对象 package Demo1701;public class Person {String name;public void showName() {System.out.print ...
css总结-笔记--部分非原创--属于资源整合
文章目录一.css基础教程 1.选择器等级 1.1层叠次序 1.2css三大特性层叠性原则继承性优先级 2.基础语法 2.1声明 2.2值的写法和单位 2.2.1颜色的几种写法(用红色举例) ...
学习笔记——css世界
流 "流"又叫文档流,是css的一种基本定位和布局机制.流是html的一种抽象概念,暗喻这种排列布局方式好像水流一样自然自动."流体布局"是html默认的布局机 ...
《CSS 世界》读书笔记-流与宽高
大厂技术坚持周更精选好文 1. 前言在学习 CSS 的过程中,我经常会被数不清的属性和特性弄得晕头转向.作为前端新手,经常会坐在显示器前花很多很多时间去 "追" 视觉稿, ...
《CSS世界》读书笔记：line-height
line-height 1. 行距与半行距 2. 半行距与精确的布局 3. 为什么line-height可以让内联元素"垂直居中"? 4. 使用line-height实现多行文本& ...
《CSS世界》笔记二：盒模型四大家族
上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐写在前面在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margi ...
《CSS世界》读书笔记（十一）
激进的margin属性 margin与元素尺寸以及相关布局元素尺寸 border box尺寸,对应jQuery中的$().outerWidth()和$().outerHeight()方法,在原生DO ...
《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...

学习《css世界》笔记之使用vertical-align数值实现文字和小图标对齐

学习《css世界》笔记之使用vertical-align数值实现文字和小图标对齐相关推荐

最新文章

热门文章