javascript - 如何垂直对齐颜色框中的文本？

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。还有 其他 方法，但它们更复杂。

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