无法垂直对齐文本 - angularJS + bootstrap + flexbox

Posted 2023-03-06

【中文标题】无法垂直对齐文本 - angularJS + bootstrap + flexbox

【英文标题】：can't align text vertically - angularJS + bootstrap + flexbox

【发布时间】：2018-10-05 13:50:10

【问题描述】：

我花了很多时间试图弄清楚为什么我不能垂直对齐这些单元格内的文本？我什么都试过了：

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

这些似乎都不起作用，我试着把它们放在硬币容器里，放在牢房里，但什么也没有……然后我有一个完全不同的桌子，总是有弹性的，它在那里工作，所以我迷路了,

这里是小提琴，我正在尝试将单元格与其中的一些文本垂直对齐，有工作解决方案的人吗？我做错了什么？

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

【参考方案1】：

尝试定位跨度

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

【参考方案2】：

您可以通过在现有样式中添加一些css 来使用flex，然后就完成了

    .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

【讨论】：

多次尝试这个解决方案，但我总是错过：display: flex;，真是个新手错误！谢谢

我已经为您缩小了代码，只需将该代码放入您的 css 中，您就可以完成您想要的 :)

【参考方案3】：

您的代码中缺少此内容：

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

Updated JsFiddle here

【讨论】：

也感谢您的解决方案！不得不将解决方案提供给几分钟前发布的其他用户，无论如何谢谢！我错过了：display:flex，在单元格中！

【参考方案4】：

将span 替换为div

喜欢

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


.epYearlyHeaderCell
   display:table;



.epYearlyHeaderCellText

    height: 100%;
    display: table-cell;
    vertical-align: middle;