如何垂直对齐颜色框中的文本？ [复制]

Posted 2023-03-05

【中文标题】如何垂直对齐颜色框中的文本？ [复制]

【英文标题】：How do I vertically align text in a colorbox? [duplicate]

【发布时间】：2013-02-20 16:39:16

【问题描述】：

如何垂直对齐 cboxTitle-div 内的文本（例如 close-Box(text)）？我使用colorbox 制作模态弹出窗口。非常感谢任何帮助！

div 结构是这样的：

<div id="cBoxContent">
    <div id="cBoxTitle"></div>
</div>

CSS 代码：

#cboxContentoverflow:hidden; background: #121219;

#cboxTitleposition:absolute; top:0; left:0; text-align:left; width:100%; color:#999; height: 38px;

【参考方案1】：

您可以通过将其line-height 属性设置为其所在元素的高度来垂直居中文本。

#cboxTitle
    position:absolute; 
    top:0; 
    left:0; 
    text-align:left; width:100%; 
    color:#999; 
    height: 38px;
    line-height: 38px;

当然，这个技巧只有在您知道div 的高度时才有效。 There areothermethods，但它们更复杂。

另一种未链接的方法是将包含您的文本的div 设置为position: relative;，然后将top 设置为50% 减去元素高度的一半。最好在 javascript 中完成。

【讨论】：

有效！:) 非常感谢您的帮助！

太棒了，我很高兴这有帮助。