Как вертикально выровнять текст в colorbox?

Question

Как вертикально выровнять текст внутри cboxTitle-div (например, закрыть окно (текст))? Я использую 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.