Question

我已经失去了那么多时间试图找出为什么我不能垂直对齐这些单元格中的文本？我尝试了一切：

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

这些似乎都没有起作用，我尝试将它们放在投币器中，放在细胞本身中，但没有......我有一个完全不同的桌子，总是有弹性，并且它有效，所以我＆＃39;迷了，

这里是小提琴，我试图将细胞与其中的一些文本垂直对齐，任何人都有一个有效的解决方案？我做错了什么？

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

Answer 1

将div替换为<div class="epYearlyHeaderCell"> <div class="epYearlyHeaderCellText">222</div> </div> .epYearlyHeaderCell{ display:table; } .epYearlyHeaderCellText { height: 100%; display: table-cell; vertical-align: middle; }

喜欢

library(dplyr)

mtcars %>% 
  mutate(quantilegroup = ntile(qsec, 4)) %>% 
  head(6)

   mpg cyl disp  hp drat    wt  qsec vs am gear carb quantilegroup
1 21.0   6  160 110 3.90 2.620 16.46  0  1    4    4             1
2 21.0   6  160 110 3.90 2.875 17.02  0  1    4    4             2
3 22.8   4  108  93 3.85 2.320 18.61  1  1    4    1             3
4 21.4   6  258 110 3.08 3.215 19.44  1  0    3    1             4
5 18.7   8  360 175 3.15 3.440 17.02  0  0    3    2             2
6 18.1   6  225 105 2.76 3.460 20.22  1  0    3    1             4

Answer 2

您可以在现有的syle中添加一些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;
}

工作小提琴here

Answer 3

尝试定位范围

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

Answer 4

您在代码中遗漏了这一点：

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

Updated JsFiddle here

不能垂直对齐文本 - angularJS + bootstrap + flexbox

4 个答案: