How do I vertically align text in a colorbox?

Question

How do I vertically align text that is inside of the cboxTitle-div (e.g. close-Box(text))? I use colorbox for making modal popups.

The div-structure is this:

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

CSS code:

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

Elliot Bonneville · Accepted Answer · 2013-03-06T02:55:33.913

You can vertically center text by setting its line-height property to the height of the element it's sitting in.

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

This trick will only work if you know the height of your div, of course. There are other methods, but they're more complex.

Another method that isn't linked is to set the div containing your text to position: relative;, then setting top to 50% minus the one half the height of the element. This is best done in Javascript.

How do I vertically align text in a colorbox?

1 Answers1