Css 无法将flex表格中图标下的文本居中对齐

我制作了这个flexbox表，如下所示：

<div class="flex-row">
        <div class="flex-col">
            <i class="thumbs-up"></i>                                            
             <i>20</i>
        </div>
        <div class="flex-col">
            <i class="thumbs-down"></i>                                         
            <i>5</i>
        </div>
</div>

这是你的电话号码

正如您所看到的，图标下方的数字没有完全居中对齐

---

我怎样才能解决这个问题

您的数字没有居中对齐的原因是：

.flex col

中的

i

元素应用了样式

text align:left

i

元素没有设置宽度，因此占据父元素宽度的100%（

.flex col

）

<> P>所以，如果你把文本放在中间，它就在列的中间，远离图标。我已经在上面的元素中添加了一些调试边框，试图解释这个问题

为了解决这个问题，我在包含数字的

I

元素中添加了一个宽度

另一种解决方案是在

.flex col

元素上设置

margin:right

，删除

flex-basis

和

flex

样式规则。然后如上所述，在

i

元素上设置

text align:center

。

.thumbs-up {
  width: 24px;
  height: 24px;
  &:after {
    content: " ";
    background: url(https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-arrow-up.svg) no-repeat;
    width: 100%;
    height: 100%;
    display: block;
  }
}

.thumbs-down {
  width: 24px;
  height: 24px;
  &:after {
    content: " ";
    background: url(https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-arrow-down.svg) no-repeat;
    width: 100%;
    height: 100%;
    display: block;
  }
}


.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 20%;

}

.flex-col {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    text-align: center;

    i {
        text-align: left;
    }

}