Javascript 如何将文本旁边的图标居中对齐？

我正在做调色板项目，我想做的是把图标放在米色文本旁边，然后把它放在右边

然而，当我把图标放在米色旁边时，调色板布局开始分裂，图标在中间没有与文本对齐

如何解决这个问题

下面的图片将找到我想怎么做。

*{
框大小：边框框；
}
身体{
保证金：0；
颜色：#FFF；
}
.董事会{
字母间距：1px；
}
.车载导航指示器{
位置：绝对位置；
排名：0；
左：0；
宽度：75px；
高度：75px；
/*背景色：红色*/
背景图像：-webkit线性渐变（左上，#FF512F，#DD2476）；
背景图像：-moz线性渐变（左上，#FF512F，#DD2476）；
背景图像：-ms线性渐变（右下角，#FF512F，#DD2476）；
背景图像：-o-线性梯度（右下角，#FF512F，#DD2476）；
背景图像：线性渐变（右下角，#FF512F，#DD2476）；
过渡：均为0.3秒；
变换：translateX（0）；
z指数：1；
}
[数据页='0']板导航指示器{
变换：translateX（0）；
}
[数据页='1']板导航指示器{
转化：translateX（100%）；
}
[数据页='2']板导航指示器{
转化：translateX（200%）；
}
.板导航按钮{
显示器：flex；
对齐项目：居中；
位置：相对位置；
z指数：2；
}
.板页{
位置：绝对位置；
顶部：75px；
左：0；
宽度：100%；
高度：计算（100%-75px）；
溢出：隐藏；
}
.板页{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
过渡：全部为0.4s；
变换：translateX（0）；
溢出：自动；
背景色：#262931；
}
.网格行主题.网格项主题{
最大宽度：130像素；
}
#左对齐{
浮动：左；
颜色：#7474；
}
#右对齐{
浮动：对；
颜色：#9CC8E3；
}
.表格项目{
弹性：01.25%；
填充：6px；
}
.表格项目主题{
弹性：01.25%；
填充：6px；
}
.网格行{
溢出-x：自动；
空白：nowrap；
}
.网格行.网格项{
显示：内联块；
最大宽度：110px；
}
.表格项目内容{
文本对齐：左对齐；
字体系列：“艾夫斯先生现代”；
字体大小：0.3rem；
文本转换：大写；
}
.选择调色板img{
边框：3px实心#FFF；
}
#下拉菜单{
显示器：flex；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
利润率：2%06%0；
字体大小：0.9rem；
字母间距：1px；
}

Omnibag项目
加热板箭头向下
趋向
见识
米色
更多霍里兹
骆驼
三文鱼粉
那瓦霍白
尼亚加拉
报春花
青金石蓝
新增
见识
淡蓝色
苔藓绿
甜瓜
雪纺绸
孤岛
山茱萸
绿色植物
所有暖色
见识
象牙
蜜露
薰衣草
金丝雀
榛子
甘蓝
鲨鱼皮
尝试{Typekit.load（{async:true}）；}catch（e）{}
$（“.board pages.grid item”）。在（“单击”，函数（）上{
$（this）.parents（'.board page'）.find（'.pick palete'）.removeClass（“pick palete”）；
$（this.addClass（“拾取调色板”）；
});
$（“.board pages.grid item pattern board”）。打开（“单击”，函数（）{
$（this）.parents（'.board page'）.find（'.pick palete'）.removeClass（“pick palete”）；
$（this.addClass（“拾取调色板”）；
});

图标的字体大小大于文本。因此，您可以减小图标的字体大小。此外，要将图标定位到右侧，您可以将其设置为其容器的绝对位置

这是我编辑的代码，试试看。希望能有帮助

.grid-item-content {
  text-align:left;
  font-family: "mr-eaves-modern";
  font-size: 0.3rem;
  text-transform:uppercase;
  position: relative;
}
.grid-item-content > i {
    font-size: 0.3rem;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}

我认为这有助于：

CSS

*{
框大小：边框框；
}
身体{
保证金：0；
颜色：#FFF；
}
.董事会{
字母间距：1px；
}
.车载导航指示器{
位置：绝对位置；
排名：0；
左：0；
宽度：75px；
高度：75px；
/*背景色：红色*/
背景图像：-webkit线性渐变（左上，#FF512F，#DD2476）；
背景图像：-moz线性渐变（左上，#FF512F，#DD2476）；
背景图像：-ms线性渐变（右下角，#FF512F，#DD2476）；
背景图像：-o-线性梯度（右下角，#FF512F，#DD2476）；
背景图像：线性渐变（右下角，#FF512F，#DD2476）；
过渡
 .grid-item-content {
   height: 26px;
   line-height: 26px;
   position: relative;
}
.grid-item-content i {
  position: absolute;
  right: 0;
  top: 0;
}

.grid-row .grid-item {
    position: relative;
}

.grid-item-content i {
    position: absolute;
    top: 0;
    right: 0;
}

.grid-item-content .more-icon{
    float: right;
    font-size: FONT SIZE YOU NEED
}