css图标跟文字对齐的两种方式

css图标跟文字对齐的两种方式：

第一种方式参考张鑫旭的css世界这本书中的讲解方式:

效果：

方式1：

.box {
	line-height: 20px;
}

.box .icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	white-space: nowrap;
	letter-spacing: -1em;
	text-indent: -999em;
}
.box .icon:before {
	content: '\3000';
}
.icon-delete {
	background: url(img/delete.png) no-repeat center;
}
.large {
	font-size: 20px;
}

<div class="box">
	<h4>1. 空标签后面跟随文本</h4>
	<p><i class="icon icon-delete"></i>删除</p>
	<h4>2. 标签里面有“删除”文本</h4>
	<p><i class="icon icon-delete">删除</i>随便什么文字</p>
	<h4>3. 字号变大</h4>
	<p class="large"><i class="icon icon-delete"></i>删除 随便什么文字</p>
</div>

分析：

（1）图标高度和当前行高都是 20px。很多小图标背景合并工具都是图标宽高多大生成的CSS 宽高就是多大，这其实并不利于形成可以整站通用的 CSS 策略，我的建议是图标原图先扩展成统一规格，比方说这里的 20px×20px，然后再进行合并，可以节约大量 CSS 以及对每个图标对齐进行不同处理的开发成本。

（2）图标标签里面永远有字符。这个可以借助:before 或:after 伪元素生成一个空格字符轻松搞定。

（3）图标 CSS 不使用 overflow:hidden 保证基线为里面字符的基线，但是要让里面潜在的字符不可见。

方式2

.box2 i {
	width: 20px;
	height: 20px;
}
.box2 i {
	vertical-align: middle;
	display: inline-block;
}
.box2 span {
	vertical-align: middle;
	display: inline-block;
}

<div class="box2">
	<h4>-----------------------------------</h4>
	<h4>1. 空标签后面跟随文本,文本加span标签</h4>
	<p><i class="icon icon-delete"></i><span>删除</span></p>
	<h4>2. 字号变大</h4>
	<p class="large"><i class="icon icon-delete"></i><span>删除</span></p>
</div>

分析：这个主要用vertical-align和inline-block两种对齐，也要给图标文字加标签才行。

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/687

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！