css 实用技巧 —— 文字和图标垂直居中对齐（四种方法）

<template>
    <div style="padding: 20px;font-size: 30px">
      无论字体多大，ex都能实现文字和图标对齐<i class="icon-arrow"></i>
    </div>
</template>
<style scoped>
    .icon-arrow {
        display: inline-block;
        width: 20px;
        height: 1ex;
        background: url(https://demo.cssworld.cn/images/5/arrow.png) no-repeat center;
    }
</style>

<template>
    <div style="padding: 20px;">
        使用 vertical-align 实现文字和图标垂直居中对齐<i class="icon-arrow"></i>
    </div>
</template>
<style scoped>
    .icon-arrow {
        vertical-align: -5px;
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url(https://demo.cssworld.cn/images/5/arrow.png) no-repeat center;
    }
</style>

<template>
    <p>文字<i class="icon-arrow"/></p>
</template>
<style scoped>
    .icon-arrow {
        background: url(https://demo.cssworld.cn/images/5/arrow.png) no-repeat center;
        width: 16px;
        height: 16px;
        display: inline-block;
        position: relative;
        top: 8px;
        vertical-align: 25%;
    }
</style>

<template>
    <div style="padding: 20px;">
        <p class="content">使用 line-height 实现文字和图标垂直居中对齐<i class="myIcon icon-arrow"></i></p>
    </div>
</template>
<style scoped>
    .content {
        line-height: 20px;
    }
 
    .myIcon {
        width: 20px;
        height: 20px;
        display: inline-block;
    }
 
    .myIcon:before {
        /*\3000 为空格字符，  */
        content: '\3000';
    }
 
    .icon-arrow {
        background: url(https://demo.cssworld.cn/images/5/arrow.png) no-repeat center;
    }
</style>