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

Question

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

div 结构是这样的：

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

CSS 代码：

#cboxContent{overflow:hidden; background: #121219;
}
#cboxTitle{position:absolute; top:0; left:0; text-align:left; width:100%; color:#999; height: 38px;}

Answer 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 中完成。