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

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 are other methods，但它们更复杂。

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