Html 定心Flexbox新闻稿提交图标

这是我的新闻稿提交表单的代码片段，我只想保持垂直居中的图标，它有点偏离中心位置。所以最后我想保持图标流体中心

.cm订阅{
最大宽度：100%；
显示：块；
宽度：400px；
}
@介质（最大宽度：768px）{
.cm订阅{
最大宽度：340px；
显示：块；
垫底：20px；
保证金：自动；
}
}
.cm认购表格{
字体系列：Arial；
边界半径：2px；
}
.cm订阅表单按钮{
过渡：所有0.3秒的缓进缓出；
边界：无；
字体大小：25px；
填充：10px 15px；
/*梯度*/
背景：绿色；
/*旧浏览器的回退*/
颜色：#FFFFFF；
光标：指针；
}
.cm订阅表单按钮：悬停{
背景：#004d00；
}
.cm订阅表单按钮：焦点{
大纲：无；
}
.cm-flex{
对齐项目：居中；
显示器：flex；
}
.cm订阅表单输入{
填充：7px 18px；
高度：43px；
边界半径：2px；
字体系列：Arial；
颜色：#a2aebb；
字体大小：15px；
边框：1px实心#ececec；
边界权：无；
宽度：100%；
背景：#ffffff；
}
.cm订阅表单输入：焦点{
大纲：无；
}

⟶

我可以看出箭头使用的是unicode字符。它本身并没有在文本行中垂直居中。当然，您可以尝试通过调整填充物等来解决这个问题，但这不是一个可持续的解决方案（因为填充物可能需要根据元素高度和字体大小进行调整）。相反，为什么不使用实际图标，例如：

---

在此

中可以找到仅替换了箭头的表单示例。我不明白。你能解释清楚吗？我看不出你的代码输出有任何偏差。如果您认为箭头未对齐，可以将其放在一个范围内，添加

display:inline block

，然后使用

vertical align

将其上下移动一点。

<i class="fa fa-long-arrow-right" aria-hidden="true"></i>