невозможно выровнять текст по вертикали - angularJS + bootstrap + flexbox

Question

Я потерял так много времени, пытаясь понять, почему я не могу выровнять текст внутри этих ячеек по вертикали?Я перепробовал все:

align-items: center;
vertical-align: middle;
justify-content: center;
justify-items: center;

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

здесь скрипка, я пытаюсь вертикально выровнять ячейки с некоторым текстом в них, кто-нибудь с рабочим решением?что я делаю не так?

https://jsfiddle.net/buwgq14a/15/

Answer 1

Заменить span на div

как

<div class="epYearlyHeaderCell">
   <div class="epYearlyHeaderCellText">222</div>
</div>


.epYearlyHeaderCell{
   display:table;
}


.epYearlyHeaderCellText
{
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

Answer 2

Вы можете использовать flex, добавив немного css в существующий файл, и все готово

    .epYearlyHeaderCell,
.epYearlyHeaderCell2,
.epYearlyHeaderMonthCell:first-child, .epYearlyHeaderMonthCell:nth-child(3), .epYearlyHeaderMonthCell:nth-child(5), .epYearlyHeaderMonthCell:nth-child(7), .epYearlyHeaderMonthCell:nth-child(8), .epYearlyHeaderMonthCell:nth-child(10), .epYearlyHeaderMonthCell:last-child, .epYearlyHeaderMonthCell:nth-child(2), .epYearlyHeaderMonthCell:nth-child(4){
    display: flex;
    align-items: center;
    justify-content: center;
}

рабочая скрипка здесь

Answer 3

Вы пропустили это в своем коде:

.epYearlyHeaderCell,
.epYearlyHeaderMonthCell {
    display: flex;
    align-items: center;
    justify-content: center;
}

Обновлен JsFiddle здесь

Answer 4

Попробуйте настроить таргетинг на диапазон

.epYearlyHeaderCell span {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
}