css 之文字与字体icon或者SVG图标上下居中对齐的解决方案

背景

做需求的时候，总是会遇到icon font 与左侧或者右侧文字居中的问题，把解决方案记下来，如下

code

<template>
    <!-- 封装这个方法，就是为了解决文字跟icon不对齐的问题 -->
    <span class="strut-align">
        {{ '\u200b'/* ZWSP(zero-width space) */ }}
        <slot></slot>
    </span>
</template>
<script>
export default {
    name: 'StrutAlign'
}
</script>
<style lang="scss" scoped>
.strut-align {
    display: inline-flex;
    align-items: center;
}
</style>

使用如下

<div>
    <strut-align>更多<i class="icon-chevron-right-o"></i></strut-align>
</div>