el-input v-model=input placeholder=请输入内容 template slot=suffix i class=el-icon-search click=goMorei template el-input如何设置el-icon-search上下居中
可以使用CSS的flex布局来实现el-icon-search上下居中，具体做法如下：
- 给标签设置display: flex和align-items: center样式，使其垂直居中对齐。
- 设置标签的父元素.template-wrapper为position: relative，使标签相对于父元素进行定位。
- 给标签设置position: absolute、right: 10px和top: 50%（或者transform: translateY(-50%)）样式，使其在父元素的右侧，且垂直居中对齐。
具体代码如下：
<el-input v-model="input" placeholder="请输入内容">
<template slot="suffix">
<div class="template-wrapper">
<i class="el-icon-search"></i>
</div>
</template>
</el-input>
<style>
.template-wrapper {
position: relative;
}
.template-wrapper i {
display: flex;
align-items: center;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
</style>
``
原文地址: https://www.cveoy.top/t/topic/eBIV 著作权归作者所有。请勿转载和采集!