Не удается выровнять текст по центру под значками в гибкой таблице.

Question

Я создал эту таблицу 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>

scss:

.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;
    }

}

Вот это jsfiddle .

Как видите, цифры не совсем выровнены по центру под значками.

Как это можно исправить?

Answer 1

Причина, по которой ваши числа не выровнены по центру, заключается в том, что:

1. Элементы i в .flex-col имеют стиль text-align: left.
2. The i элементам не задана ширина, поэтому занимают 100% ширины родительского элемента (.flex-col)

Так что если бы вы выровняли текст по центру, это было быв середине столбца, вдали от значка. Я добавил несколько отладочных границ к элементам этой скрипки , чтобы попытаться объяснить проблему.

Чтобы исправить это, я добавил ширину к элементу i, содержащему числа пример решения для скрипки

Альтернативное решение - установить margin: right для элементов .flex-col, удалив правила стиля flex-basis и flex. Затем установите text-align: center на элементе i, как указано выше. см. Альтернативный пример скрипки