使用vertical-align数值实现文字和小图标对齐实例页面

展示

请选择 vertical-align:baseline;

请选择 vertical-align:middle; 图标偏下1px

请选择 vertical-align:-5px;

代码

HTML：

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

CSS：

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